素材管理对接完成

api.config.js

@@ -16,4 +16,5 @@ module.exports = [
   { name: 'MarketingV2', token: 'f6d5cee2383ca203dfa2882b84dfa02a1d79de3c3ad892b42f030437fdc5ea21', categoryIds: [0], }, // 营销能力
   { name: 'AfterServiceV2', token: '58748fc89dcdb33ec5cac520c00293ba92abca362a8ddb979df589effd0db9bd', categoryIds: [0], }, // 售后能力V2
   { name: 'ManageV2', token: '9ee3a1cb5a73ca02935e70debeda5bde0464f2fe1eb32c25855fd8acff9f68f2', categoryIds: [0] },  // 平台后台v2
+  { name: 'MaterialV2', token: '86f551f43a2b0aa84720cf40cf45316414d2d47991e1b98f7fd9cff7cd45d507', categoryIds: [0] },  // 素材管理
 ]

config/routes/index.ts

@@ -11,7 +11,7 @@ import MemberRoute from './memberRoute' //  会员能力路由
 import TranactionRoute from './tranactionRoute' // 交易能力路由
 // import LogisticsRoute from './logisticsRoutes' // 物流能力路由
 // import PayandSettleRoute from './payandSettle' //支付与结算
-// import AuthConfigRoute from './authConfigRoute'
+import AuthConfigRoute from './authConfigRoute'
 // import AfterService from './afterServiceRoute' // 售后
 // import HandlingRoute from './handlingRoute'; // 加工能力
 // import DealAbilityRoute from './dealAbilityRoute'; //
@@ -21,10 +21,11 @@ import asyncRoutes from '../router.config.json';
 // import ProcurementRoute from './procurementRoute';
 // import { callForBidsRoute } from './procurementRoute/callForBids';
 // import { purchaseInquiryRoute } from './procurementRoute/purchaseInquiry';
+
 // import contracRoute from './contracRoute';
 // export const routes = [CommodityRoute, MemberRoute, ShopRoute, ChannelRoute, TranactionRoute, AfterService, PayandSettleRoute, LogisticsRoute, AuthConfigRoute, HandlingRoute, BalaceRoute]
 
-const isDev = false;
+const isDev = !+false;
 const homeRoute = {
   path: `/memberCenter/home`,
   name: 'home',
@@ -32,7 +33,7 @@ const homeRoute = {
   key: 'home',
   component: '@/pages/home',
 };
-const routes = isDev ? [ homeRoute ] : asyncRoutes;
+const routes = isDev ? [ homeRoute, AuthConfigRoute ] : asyncRoutes;
 // const routes = isDev ? [ CommodityRoute ] : asyncRoutes;
 
 const memberCenterRoute = {

src/pages/systemSetting/key/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Card, Row, Col, Button, Typography } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { getManageSecretKeyGetSecretKey } from '@/services/ManageV2Api';
-import { useIntl} from 'umi'
+import { useIntl } from 'umi'
 
 
 const Key = () => {
@@ -28,7 +28,7 @@ const Key = () => {
       s = Math.floor(leftTime / 1000 % 60);
     }
     //递归每秒调用countTime方法，显示动态时间效果
-    setFmt(`${d}${intl.formatMessage({id: 'contract.tian'})}${h}${intl.formatMessage({id: 'selfManagement.hours'})}${m}${intl.formatMessage({id: 'member.components.MemberInvestigateInfo.score.unit'})}${s}${intl.formatMessage({id: 'detail.purchase.second'})}`);
+    setFmt(`${d}${intl.formatMessage({ id: 'contract.tian' })}${h}${intl.formatMessage({ id: 'selfManagement.hours' })}${m}${intl.formatMessage({ id: 'member.components.MemberInvestigateInfo.score.unit' })}${s}${intl.formatMessage({ id: 'detail.purchase.second' })}`);
     setTimeout(countTime, 1000);
   }
   const getSecretKey = async () => {
@@ -58,7 +58,7 @@ const Key = () => {
                 style={{ marginBottom: '0', marginLeft: '24px' }}
                 strong
                 copyable={{
-                  icon: [<Button style={{ marginLeft: '24px' }}>{intl.formatMessage({ id: 'systemSetting.key.copyKey' })}</Button>, <Button style={{ marginLeft: '24px' }} type='primary'>{intl.formatMessage({id: 'systemSetting.key.copyKey'})}</Button>]
+                  icon: [<Button style={{ marginLeft: '24px' }}>{intl.formatMessage({ id: 'systemSetting.key.copyKey' })}</Button>, <Button style={{ marginLeft: '24px' }} type='primary'>{intl.formatMessage({ id: 'systemSetting.key.copyKey' })}</Button>]
                 }}
               >
                 {key}

src/pages/systemSetting/materialmanagement/index.less

+.head{
+  display: flex;
+  justify-content: space-between;
+  .left{
+    display: flex;
+    .del{
+      margin-left: 10px;
+    }
+  }
+}
+.list{
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 20px;
+  row-gap: 10px;
+  .listItem{
+    width: 139px;
+    margin-right: 21px;
+    cursor:pointer;
+    .Imgbox{
+      height: 139px;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      position: relative;
+      img{
+        width: 100%;
+        height: 100%;
+      }
+      video{
+        width: 100%;
+        height: 100%;
+      }
+      .cheboxUrl{
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        width: 20px;
+        height: 20px;
+      }
+    }
+    .ImgboxAtive{
+      border: 1px solid #00A98F;
+    }
+   .Imgbox :hover{
+      border: 1px solid #00A98F;
+      border-radius: 5px;
+    }
+    .ImgText{
+      width: 139px;
+      padding: 4px 0;
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .listItem:nth-child(10n) {
+    margin-right: 0px; 
+  }
+}
+.noData{
+  text-align: center;
+  padding: 50px 0;
+  width: 100%;
+}
+.Pagination{
+  text-align: right;
+}
\ No newline at end of file

src/pages/systemSetting/materialmanagement/index.tsx

+import React, { useEffect, useState } from 'react';
+import { UploadOutlined } from '@ant-design/icons';
+import { Card, DatePicker, Button, Upload, Input, Select, message } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Pagination } from 'antd';
+import { useIntl } from 'umi'
+import moment from 'moment';
+import styles from './index.less';
+import { UPLOAD_TYPE } from '@/constants'
+import { postManageMaterialLibraryPage, postManageMaterialLibraryAdd, postManageMaterialLibraryBatchDel } from '@/services/MaterialV2Api';
+
+const { RangePicker } = DatePicker
+const { Option } = Select;
+const chebox = 'https://lingxi-mini.oss-cn-hangzhou.aliyuncs.com/Images/xuanzhong.png';
+
+type fromIpors = {
+  fileName: string, // 名字
+  fileType: any, // 类型
+  // startTime: string, // 开始时间
+  // endTime: string, // 结束时间
+  current: number, // 当前页
+  pageSize: number, // 页大小
+}
+const Materialmanagement = () => {
+  const intl = useIntl();
+
+  const [dataSource, setdataSource] = useState<any>([]) // 列表数据
+  const [delfalg, setdelfalg] = useState<any>(false); // 控制显示删除
+  const [startTime, setstartTime] = useState<string>(''); // 开始时间
+  const [endTime, setendTime] = useState<string>(''); // 结束时间
+  const [total, settotal] = useState<number>(0); // 总数
+  /*提交数据 */
+  const [from, setfrom] = useState<fromIpors>({
+    fileName: '', // 名字
+    fileType: '', // 类型
+    // startTime: '', // 开始时间
+    // endTime: '', // 结束时间
+    current: 1, // 当前页
+    pageSize: 50, // 页大小
+  })
+
+  // 时间选择
+  const onChange = (value, dateString) => {
+    setstartTime(moment(value[0]).format('YYYY-MM-DD HH:mm:ss'))
+    setendTime(moment(value[1]).format('YYYY-MM-DD HH:mm:ss'))
+  }
+  // 下拉
+  const handleChange = (value) => {
+    const data = { ...from };
+    data.fileType = value;
+    setfrom({ ...data })
+  }
+  // 点击选中的
+  const setfalg = (item: any, index: number) => {
+    const list = [...dataSource]
+    list[index].cheboxUrl = !list[index].cheboxUrl ? chebox : '';
+    let falg = list.some(item => item.cheboxUrl)
+    setdelfalg(falg)
+    console.log(list)
+    setdataSource(list)
+  }
+
+  /**
+   * 获取分页数据
+   * */
+  const materialList = async () => {
+    const data: any = from;
+    if (startTime && endTime) {
+      data.startTime = startTime;
+      data.endTime = endTime;
+    }
+    const res = await postManageMaterialLibraryPage(data)
+    console.log(res);
+    if (res.code === 1000) {
+      setdataSource(res.data.data)
+      settotal(res.data.totalCount)
+    }
+  }
+
+  /**
+   * 上传大小限制
+   * */
+  const beforeDocUpload = (file: any) => {
+    const isLt50M = file.size / 1024 / 1024 < 50;
+    if (!isLt50M) {
+      message.error(intl.formatMessage({ id: 'contract.shangchuanwenjiandaxiaobuchao' }));
+    }
+    return isLt50M;
+  }
+  /**
+   * 新曾
+   * */
+  const handleFrontUrl = async ({ fileList }) => {
+    if (fileList[0].response) {
+      if (fileList[0].response.code === 1000) {
+        let fileType = 3;
+        console.log(fileList[0].type)
+        const isJpgOrPng = fileList[0].type === 'image/jpeg' || fileList[0].type === 'image/png' || fileList[0].type === 'image/jpg';
+        if (isJpgOrPng) {
+          fileType = 1
+        }
+        switch (fileList[0].type) {
+          case "video/mp4":
+            fileType = 2;
+            break;
+        }
+        const res = await postManageMaterialLibraryAdd(
+          {
+            fileName: fileList[0].name,
+            fileUrl: fileList[0].response.data,
+            fileType
+          }
+        )
+        if (res.code === 1000) {
+          materialList()
+        }
+      }
+    }
+    if (fileList[0].status !== "done") {
+      return
+    }
+  }
+  /**
+   * 删除
+   * */
+  const del = async () => {
+    const idList = [];
+    dataSource.find((item: any) => {
+      if (item.cheboxUrl) {
+        idList.push(item.id)
+      }
+    })
+    const res = await postManageMaterialLibraryBatchDel({ idList: idList });
+    if (res.code === 1000) {
+      materialList()
+      let falg = dataSource.some(item => item.cheboxUrl)
+      setdelfalg(falg)
+    }
+  }
+
+  /**
+   * 搜索
+   * */
+  const search = () => {
+    materialList()
+  }
+
+  /**
+   * 设置搜索值
+   * */
+  const setvalue = (e, name) => {
+    const value = e.target.value;
+    from[name] = value;
+    console.log(value, name, from)
+    setfrom({ ...from })
+  }
+  useEffect(() => {
+    materialList()
+  }, [])
+
+  const handlePaginationChange = (current: number, pageSize: number) => {
+    console.log(current, pageSize)
+    from.current = current;
+    setfrom({ ...from })
+    materialList()
+  }
+
+  const fileTypeDom = (type, item) => {
+    if (type == 1) {
+      return (
+        <img src={item.fileUrl} alt="" />
+      )
+    }
+    if (type == 2) {
+      return (
+        <video src={item.fileUrl}></video>
+      )
+    }
+    else {
+      return (
+        <img src="http://lingxi-mini.oss-cn-hangzhou.aliyuncs.com/Images/fujian@2x.png" alt="" />
+      )
+    }
+  }
+
+  const download = (url, fileName) => {
+    const eleLink = document.createElement('a');
+    eleLink.download = fileName;
+    eleLink.style.display = 'none';
+    // 字符内容转变成blob地址
+    const blob = new Blob([url]);
+    eleLink.href = URL.createObjectURL(blob);
+    // 触发点击
+    document.body.appendChild(eleLink);
+    eleLink.click();
+    // 然后移除
+    document.body.removeChild(eleLink);
+  }
+  return (
+    <PageHeaderWrapper>
+      <Card>
+        <div className={styles.head}>
+          <div className={styles.left}>
+            <Upload
+              action="/api/file/file/upload"
+              data={{ fileType: UPLOAD_TYPE }}
+              showUploadList={false}
+              beforeUpload={beforeDocUpload}
+              onChange={handleFrontUrl}
+              accept='.doc,.docx,.jpg, .jpeg, .png,.mp4'
+              maxCount={1}
+            >
+              <Button type="primary">
+                <UploadOutlined /> {intl.formatMessage({ id: 'components.shangchuanwenjian' })}
+              </Button>
+            </Upload>
+            {
+              delfalg &&
+              <Button className={styles.del} onClick={del}>{intl.formatMessage({ id: 'saleOrder.delete' })}</Button>
+            }
+          </div>
+          <div className={styles.right}>
+            <Input
+              style={{ width: 240, marginRight: 10 }}
+              placeholder="搜索"
+              allowClear
+              onChange={(e) => setvalue(e, 'fileName')}
+            />
+            <RangePicker
+              showTime={{ format: 'HH:mm' }}
+              format="YYYY-MM-DD HH:mm"
+              onChange={onChange}
+            />
+            <Select defaultValue="全部" style={{ marginLeft: 10, width: 120 }} onChange={handleChange}>
+              <Option value="0">全部</Option>
+              <Option value="1">图片</Option>
+              <Option value="2">视频</Option>
+              <Option value="3">文件</Option>
+            </Select>
+            <Button type="primary" onClick={search}>
+              查询
+            </Button>
+          </div>
+        </div>
+        <div className={styles.list}>
+          {
+            dataSource.map((item: any, index: number) => (
+              <div className={styles.listItem} >
+
+                <div onClick={() => setfalg(item, index)} className={[styles['Imgbox'], item.cheboxUrl ? styles['ImgboxAtive'] : ''].join(' ')} >
+                  {fileTypeDom(item.fileType, item)}
+
+                  {
+                    item.cheboxUrl &&
+                    <img className={styles.cheboxUrl} src={item.cheboxUrl} alt="" />
+                  }
+                </div>
+                <div className={styles.ImgText}>{item.fileName}</div>
+                <div style={{ color: '#00A98F' }} onClick={() => download(item.fileUrl, item.fileName)}>下载</div>
+              </div>
+            ))
+          }
+
+          {
+            dataSource.length <= 0 &&
+            <div className={styles.noData}>暂无数据</div>
+          }
+        </div>
+        <div className={styles.Pagination}>
+          <Pagination total={total} pageSize={from.pageSize} onChange={handlePaginationChange} />
+        </div>
+      </Card>
+    </PageHeaderWrapper >
+  )
+}
+
+export default Materialmanagement