system-copyright-react/src/route/ProductRelease/ProductRelease.tsx

// import React from 'react'
import './product-release.css'
import {
  Select, DatePicker, Button,
  // message,
  // Checkbox, 
  Empty, Switch, Modal, Pagination
} from 'antd';
import EditModal from './components/EditModal/EditModal'
// import type { CheckboxProps } from 'antd';
import { SearchOutlined, ClearOutlined } from '@ant-design/icons';
import type { DatePickerProps } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN';
import React, { useState, useEffect } from 'react';
import dayjs, { } from 'dayjs';
export default function ProductRelease() {
  const height = window.innerHeight - 180;
  // const [messageApi, contextHolder] = message.useMessage();
  const dateFormat = 'YYYY年MM月DD日';
  const [belongType, setBelongType] = useState<any>() // 所属人类型
  const [date, setDate] = useState<any>()  // 日期
  const [language, setLanguage] = useState<any>()  // 开发者语言
  const [type, setType] = useState<any>() //软著类型
  const [page, setPage] = useState(1) // 分页
  const [editModalOpen, setEditModalOpen] = useState(false)  // 控制编辑弹窗
  const [delModalOpen, setDelModalOpen] = useState(false)   // 控制删除弹窗
  const [sellModalOpen, setSellModalOpen] = useState(false)  // 控制出售弹窗

  // 更改所属人类型
  const belongTypeChange = (value: string) => {
    console.log(`selected ${value}`);
    setBelongType(value)
  }
  // 更改日期
  const onChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
    setDate(date)
    // dayjs(formInfo.getFieldValue('projDevCompleteDate')).format(dateFormat),
    console.log('日期', dayjs(date).format(dateFormat));

  };
  // 选择开发者语言
  const selectLanguage = (value: string) => {
    setLanguage(value)
  }
  // 选择软著类型
  const selectType = (value: string) => {
    setType(value)
  }
  // 初始化搜索条件
  const init = () => {
    setBelongType(undefined)
    setDate(undefined)
    setLanguage(undefined)
    setType(undefined)
  }
  // 点击搜索
  const searchKeyWords = () => {
    setPage(1)
    console.log(
      // dayjs(date).format(dateFormat)
      belongType, language, date, type
    );
    if (date) {
      console.log(dayjs(date).format(dateFormat));
    }
  }

  // 点击清除
  const clearKeyWords = () => {
    init()
    setPage(1)
    // 重新获取数据
  }

  // 选框选择时触发事件
  // const checkChange = (e: any, item: any) => {
  //   console.log(`checked = ${e.target.checked}`);
  //   console.log(e);
  //   if (e.target.checked == true) {
  //     console.log(item.order);
  //   }
  // };
  // 开关滑动触发
  const opneChange = (e: any, item: any) => {
    // 开启
    if (e) {
      console.log('开启', item.order);
      // 关闭
    } else {
      console.log('关闭', item.order);
    }
  }

  // 点击编辑
  const edit = (item: any) => {
    console.log(item.order);
    setEditModalOpen(true)
  };
  // 点击删除
  const del = (item: any) => {
    console.log(item.order);
    setDelModalOpen(true)
  };
  // 点击出售
  const sell = (item: any) => {
    console.log(item.order);
    setSellModalOpen(true)
  };
  // 点击提交
  const submit = (item: any) => {
    console.log(item.order);
  };
  const data: any = [
    {
      order: '122',
      time1: '2020-04-19 11:51:03',
      img: 'xxx',
      name: 'xxxx系统',
      v: '1-1-v',
      price: '5.00',
      time2: '2020-04-19 11:51:03',
      open: '0',
      status: '平台已审核',
    },
    {
      order: '123',
      time1: '2020-04-19 11:51:03',
      img: 'xxx',
      name: 'xxxx系统',
      v: '1-1-v',
      price: '5.00',
      time2: '2020-04-19 11:51:03',
      open: '1',
      status: '平台已审核',
    },
    {
      order: '124',
      time1: '2020-04-19 11:51:03',
      img: 'xxx',
      name: 'xxxx系统',
      v: '1-1-v',
      price: '5.00',
      time2: '2020-04-19 11:51:03',
      open: '0',
      status: '平台已审核',
    },
    {
      order: '125',
      time1: '2020-04-19 11:51:03',
      img: 'xxx',
      name: 'xxxx系统',
      v: '1-1-v',
      price: '5.00',
      time2: '2020-04-19 11:51:03',
      open: '0',
      status: '平台已审核',
    },
    {
      order: '126',
      time1: '2020-04-19 11:51:03',
      img: 'xxx',
      name: 'xxxx系统',
      v: '1-1-v',
      price: '5.00',
      time2: '2020-04-19 11:51:03',
      open: '0',
      status: '平台已审核',
    },

  ];

  useEffect(() => {


  }, [])


  return (
    <div className='product-release' style={{ height: `${height}px`, overflow: 'auto' }}>
      {/* {contextHolder} */}
      <div className='product-release-search'>
        <Select
          // defaultValue="lucy"
          placeholder='请选择所属者类型'
          style={{ width: 198, height: 36, marginRight: 12 }}
          onChange={belongTypeChange}
          options={[
            { value: 'person', label: '个人' },
            { value: 'lucy', label: '企业' },
          ]}
          value={belongType}
        />
        <DatePicker placeholder="软件取得时间"
          style={{ width: 198, height: 36, marginRight: 12 }}
          locale={locale}
          onChange={onChange}
          value={date}
        />
        <Select
          // defaultValue="lucy"
          placeholder='请选择所开发者语言'
          style={{ width: 198, height: 36, marginRight: 12 }}
          onChange={selectLanguage}
          options={[
            { value: 'java', label: 'java' },
            { value: 'php', label: 'php' },
          ]}
          value={language}
        />
        <Select
          // defaultValue="lucy"
          placeholder='请选择软著类型'
          style={{ width: 198, height: 36, marginRight: 12 }}
          onChange={selectType}
          options={[
            { value: 'person', label: '1' },
            { value: 'lucy', label: '2' },
          ]}
          value={type}
        />
        <Button type="primary"
          style={{
            height: 36,
            // backgroundColor: '#FF9F08'
          }}
          onClick={searchKeyWords}
          icon={<SearchOutlined />}>
          搜索
        </Button>
        <Button
          style={{
            height: 36,
            marginLeft: 10,
            // backgroundColor: '#FF9F08'
          }}
          icon={<ClearOutlined />}
          onClick={clearKeyWords}
        >
          清除
        </Button>
      </div>
      <div>
        {/* 表格 */}
        <div className='product-release-table' style={{ height: `${height - 130}px` }}>
          {data.length == 0 ? (
            <div className='nodata' style={{ height: `${height - 93}px` }}>
              <Empty
                description={
                  '暂无数据'
                } />
            </div>) : (
            <div style={{ height: `${height - 130}px`, overflow: 'auto', position: 'relative' }}>
              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead >
                  <tr style={{ background: '#F7F7F7', height: 32, fontSize: 14 }}>
                    <th style={{ width: 50 }}>序号</th>
                    <th style={{ width: 110 }}></th>
                    <th>软著名称</th>
                    <th>软著版本</th>
                    <th>售卖价格</th>
                    <th>截止售卖时间</th>
                    <th>著作权上架</th>
                    <th>平台审核</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody style={{ color: '#888888' }}>
                  {data.map((item: any, index: any) => {
                    return (
                      <React.Fragment key={item.order}>
                        <tr style={{ height: 15 }}>
                          <td colSpan={9} style={{ border: 'none' }}>

                          </td>
                        </tr>
                        <tr style={{ background: '#F7F7F7', height: 45 }}>
                          <td colSpan={9}>
                            {/* <Checkbox style={{ marginLeft: 16 }} onChange={
                              (event) => checkChange(event, item)
                            }></Checkbox> */}
                            <span style={{ marginLeft: 55 }}>
                              编号:  {item.order}
                            </span>
                            <span style={{ marginLeft: 45 }}>
                              软著取得时间:  {item.time1}
                            </span>
                          </td>
                        </tr>
                        <tr style={{ textAlign: 'center', height: 110 }}>
                          <td>{index + 1}</td>
                          <td className='product-release-table-img-td'>
                            <div className='product-release-table-img'>
                              {item.img}
                            </div>
                          </td>
                          <td>
                            <div className='product-release-table-name'>
                              {item.name}
                            </div>
                            <div>
                              (接口软著)
                            </div>
                          </td>
                          <td>{item.v}</td>
                          <td style={{ fontSize: 24, color: '#FF5D15' }}>{item.price}</td>
                          <td>{item.time2}</td>
                          <td>
                            <Switch checkedChildren="On" unCheckedChildren="Off" onChange={(e) => { opneChange(e, item) }} defaultChecked={item.open == 0 ? false : true} />
                          </td>
                          <td>{item.status}</td>
                          <td>
                            <span className='product-release-table-btn' onClick={() => {
                              edit(item)
                            }}>编辑</span>
                            <span className='product-release-table-btn product-btn' onClick={() => del(item)}>删除</span>
                            <span className='product-release-table-btn product-btn' onClick={() => sell(item)}>出售</span>
                            <span className='product-release-table-btn product-btn' onClick={() => submit(item)}>提交审核</span>
                          </td>
                        </tr>
                      </React.Fragment>

                    )
                  })}

                </tbody>
              </table>
              {/* <div style={{ height: 10 }}></div> */}

            </div>

          )}

        </div>


        {/* defaultCurrent: 默认当前页数  total:数据总数 defaultPageSize:'页面显示几条'  */}
        <div className='product-release-pagination'>
          <Pagination
            showSizeChanger={false}
            defaultCurrent={page} total={20} defaultPageSize={10} onChange={(page) => {
              // console.log(page)
              setPage(page)
            }} />
        </div>
      </div>

      {/* 编辑弹窗 */}
      <Modal title={'编辑'}
        destroyOnClose={true}
        open={editModalOpen}
        footer={null} // 将 footer 设置为 null 来隐藏自带按钮
        width={1152}
        onCancel={() => {
          setEditModalOpen(false);
        }}
      >
        <div style={{ height: `${height - 20}px`, overflow: 'auto', borderTop: '1px solid #e8e8e8' }}>
          <EditModal closeModal={() => { setEditModalOpen(false) }} ></EditModal>
        </div>
      </Modal>
      {/* 删除弹窗 */}
      <Modal title="删除"
        okText="确认"
        cancelText="取消"
        destroyOnClose={true}
        open={delModalOpen}
        onOk={() => {
          setDelModalOpen(false)
        }}
        onCancel={() => {
          setDelModalOpen(false)
        }}
        okButtonProps={{ style: { background: 'red', color: 'white' } }}
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          height: `${height}px`,
        }}>
        <div style={{
          width: 700,
          marginTop: 20
        }}>
          删除后这条信息将不被保存，确定删除吗？
        </div>
      </Modal>
      {/* 出售弹窗 */}
      <Modal title="出售"
        okText="确认"
        cancelText="取消"
        destroyOnClose={true}
        open={sellModalOpen}
        onOk={() => {
          setSellModalOpen(false)
        }}
        onCancel={() => {
          setSellModalOpen(false)
        }}
        okButtonProps={{ style: { background: '#28915A', color: 'white' } }}
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          height: `${height}px`,
        }}>
        <div style={{
          width: 700,
          marginTop: 20
        }}>
          确定出售接口管理系统的软件著作权证吗？
        </div>
      </Modal>
    </div>
  )
}