diff --git a/src/route/CopyrightGgoods/CopyrightGgoods.tsx b/src/route/CopyrightGgoods/CopyrightGgoods.tsx index 0034828..58a4aa8 100644 --- a/src/route/CopyrightGgoods/CopyrightGgoods.tsx +++ b/src/route/CopyrightGgoods/CopyrightGgoods.tsx @@ -2,10 +2,10 @@ import './copyrightG-goods.css' import { Select, DatePicker, Button, Table, // message, - Space, Input, Empty + Space, Input, Empty, Pagination } from 'antd'; // import type { TableColumnsType } from 'antd'; -import { SearchOutlined,ClearOutlined } from '@ant-design/icons'; +import { SearchOutlined, ClearOutlined } from '@ant-design/icons'; import type { DatePickerProps } from 'antd'; import locale from 'antd/es/date-picker/locale/zh_CN'; const { Column } = Table; @@ -33,7 +33,7 @@ export default function CopyrightGgoods() { { name: '智能管理系统', short: '简称', - number: '31234567891234561789', + number: '312345678912345617891', price: '5.00', version: '1-1-1', time: '2020-04-19 15：42:21', @@ -42,7 +42,7 @@ export default function CopyrightGgoods() { { name: '商城管理系统', short: '简称', - number: '1123456789123456789', + number: '11234567891234567892', price: '5.00', version: '1-1-1', time: '2020-04-19 15：42:21', @@ -51,7 +51,70 @@ export default function CopyrightGgoods() { { name: 'xx系统', short: '简称', - number: '2123456789123456789', + number: '21234567891234567893', + price: '5.00', + version: '1-1-1', + time: '2020-04-19 15：42:21', + language: 'java' + }, + { + name: 'xx系统', + short: '简称', + number: '21234567891234567894', + price: '5.00', + version: '1-1-1', + time: '2020-04-19 15：42:21', + language: 'java' + }, + { + name: 'xx系统', + short: '简称', + number: '21234567891234567895', + price: '5.00', + version: '1-1-1', + time: '2020-04-19 15：42:21', + language: 'java' + }, + { + name: 'xx系统', + short: '简称', + number: '21234567891234567896', + price: '5.00', + version: '1-1-1', + time: '2020-04-19 15：42:21', + language: 'java' + }, + { + name: 'xx系统', + short: '简称', + number: '21234567891234567897', + price: '5.00', + version: '1-1-1', + time: '2020-04-19 15：42:21', + language: 'java' + }, + { + name: 'xx系统', + short: '简称', + number: '21234567891234567898', + price: '5.00', + version: '1-1-1', + time: '2020-04-19 15：42:21', + language: 'java' + }, + { + name: 'xx系统', + short: '简称', + number: '21234567891234567899', + price: '5.00', + version: '1-1-1', + time: '2020-04-19 15：42:21', + language: 'java' + }, + { + name: 'xx系统', + short: '简称', + number: '21234567891234567890', price: '5.00', version: '1-1-1', time: '2020-04-19 15：42:21', @@ -62,7 +125,7 @@ export default function CopyrightGgoods() { return ( -
+
{/* {contextHolder} */}
) : ( - +
+
- ( - index + 1 - )} align="center" /> - ( - {text} - )} - /> - - - ( - {text} - )} /> - - - - {/* */} - ( - - { - console.log(record.number); + dataSource={data} + // pagination={{ + // defaultPageSize: 10, // 设置默认一页显示 5 条数据 + // }} + pagination={false} // 不显示分页 + style={{ textAlign: 'center' }} // 设置表格内容居中显示 + rowKey="number" // 指定数据项的唯一标识符 + > + ( + index + 1 + )} align="center" /> + ( + {text} + )} + /> + + + ( + {text} + )} /> + + + + {/* */} + ( + + { + console.log(record.number); - }}>预览 - - )} - /> -
)} + }}>预览 + + )} + /> + +
+ {/* defaultCurrent: 默认当前页数 total:数据总数 defaultPageSize:'页面显示几条' */} +
+ { + console.log(page) + }} /> +
+
+ )} diff --git a/src/route/ProductRelease/ProductRelease.tsx b/src/route/ProductRelease/ProductRelease.tsx index 636c812..a378aa3 100644 --- a/src/route/ProductRelease/ProductRelease.tsx +++ b/src/route/ProductRelease/ProductRelease.tsx @@ -3,7 +3,7 @@ import './product-release.css' import { Select, DatePicker, Button, // message, - Checkbox, Empty, Switch, Modal + Checkbox, Empty, Switch, Modal, Pagination } from 'antd'; import EditModal from './components/EditModal/EditModal' // import type { CheckboxProps } from 'antd'; @@ -31,17 +31,36 @@ export default function ProductRelease() { console.log('日期', dayjs(date).format(dateFormat)); }; - + // 选择开发者语言 + const [language, setLanguage] = useState(undefined) + const selectLanguage = (value: string) => { + setLanguage(value) + } + // 选择软著类型 + const [type, setType] = useState(undefined) + const selectType = (value: string) => { + setType(value) + } // 初始化搜索条件 const init = () => { setBelongType(undefined) setDate(undefined) + setLanguage(undefined) + setType(undefined) + } + // 点击搜索 + const searchKeyWords = () => { + console.log( + belongType,language,dayjs(date).format(dateFormat),type + ); + } // 点击清除 const clearKeyWords = () => { init() // 重新获取数据 } + // 选框选择时触发事件 const checkChange = (e: any, item: any) => { console.log(`checked = ${e.target.checked}`); @@ -74,7 +93,7 @@ export default function ProductRelease() { console.log(item.order); setDelModalOpen(true) }; - // 删除点击确认 + // 控制出售弹窗 const [sellModalOpen, setSellModalOpen] = useState(false) @@ -104,7 +123,6 @@ export default function ProductRelease() { 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', @@ -112,7 +130,7 @@ export default function ProductRelease() { status: '平台已审核', }, { - order: '121', + order: '124', time1: '2020-04-19 11:51:03', img: 'xxx', name: 'xxxx系统', @@ -122,12 +140,35 @@ export default function ProductRelease() { 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: '平台已审核', + }, + ]; return ( -
+
{/* {contextHolder} */}
@@ -184,13 +227,13 @@ export default function ProductRelease() { }} icon={} onClick={clearKeyWords} - > + > 清除
{/* 表格 */} -
+
{data.length == 0 ? (
) : ( - - - - - - - - - - - - - - - - {data.map((item: any, index: any) => { - return ( - - - -
序号软著名称软著版本售卖价格截止售卖时间著作权上架平台审核操作
+
+ + + + + + + + + + + + + + + + {data.map((item: any, index: any) => { + return ( + + + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - ) - })} + ) + })} + + +
序号软著名称软著版本售卖价格截止售卖时间著作权上架平台审核操作
-
- checkChange(event, item) - }> - - 编号: {item.order} - - - 软著取得时间: {item.time1} - -
{index + 1} -
- {item.img} -
- 		-
- {item.name} -
-
- (接口软著) -
- 		{item.v}{item.price}{item.time2} - { opneChange(e, item) }} defaultChecked={item.open == 0 ? false : true} /> - {item.status} - edit(item)}>编辑 - del(item)}>删除 - sell(item)}>出售 - submit(item)}>提交审核 -
+ checkChange(event, item) + }> + + 编号: {item.order} + + + 软著取得时间: {item.time1} + +
{index + 1} +
+ {item.img} +
+ 		+
+ {item.name} +
+
+ (接口软著) +
+ 		{item.v}{item.price}{item.time2} + { opneChange(e, item) }} defaultChecked={item.open == 0 ? false : true} /> + {item.status} + edit(item)}>编辑 + del(item)}>删除 + sell(item)}>出售 + submit(item)}>提交审核 +
+ {/*
*/} + +
-
)}
- + {/* defaultCurrent: 默认当前页数 total:数据总数 defaultPageSize:'页面显示几条' */} +
+ { + console.log(page) + }} /> +
{/* 编辑弹窗 */} @@ -289,7 +342,7 @@ export default function ProductRelease() { }} >
- { setEditModalOpen(false)}} > + { setEditModalOpen(false) }} >
{/* 删除弹窗 */} @@ -312,14 +365,14 @@ export default function ProductRelease() { height: `${height}px`, }}>
删除后这条信息将不被保存，确定删除吗？
- {/* 出售弹窗 */} -
确定出售接口管理系统的软件著作权证吗？
diff --git a/src/route/ProductRelease/components/EditModal/EditModal.css b/src/route/ProductRelease/components/EditModal/EditModal.css index 6168270..017e6e8 100644 --- a/src/route/ProductRelease/components/EditModal/EditModal.css +++ b/src/route/ProductRelease/components/EditModal/EditModal.css @@ -1,5 +1,5 @@ .editModal { - padding: 32px 32px 58px 33px; + padding: 32px 32px 18px 33px; box-sizing: border-box; } @@ -7,6 +7,7 @@ .editModal-title { display: flex; align-items: center; + margin-bottom: 34px; } .editModal-title-box { @@ -25,10 +26,30 @@ .editModal-img-box { width: 489px; - height: 60px; + height: 50px; background: #F8F8F8; border-radius: 5px; + display: flex; + justify-content: space-between; + align-items: center; } -.css-dev-only-do-not-override-1ae8k9u.ant-select-outlined.ant-select-multiple .ant-select-selection-item{ - background-color: rgba(0,114,255,0.13); + +.css-dev-only-do-not-override-1ae8k9u.ant-select-outlined.ant-select-multiple .ant-select-selection-item { + background-color: rgba(0, 114, 255, 0.13); +} + +.editModalBtn { + margin-left: 857px; + margin-top: 57px; +} + +.css-dev-only-do-not-override-1ae8k9u.ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select, +.css-dev-only-do-not-override-1ae8k9u.ant-upload-wrapper.ant-upload-picture-circle-wrapper .ant-upload.ant-upload-select { + width: 40px; + height: 40px; + margin-top: 8px; + margin-left: 17px; + border: 0; + background: #E1E1E1; + border-radius: 0; } \ No newline at end of file diff --git a/src/route/ProductRelease/components/EditModal/EditModal.tsx b/src/route/ProductRelease/components/EditModal/EditModal.tsx index b5ca0c7..1d11fab 100644 --- a/src/route/ProductRelease/components/EditModal/EditModal.tsx +++ b/src/route/ProductRelease/components/EditModal/EditModal.tsx @@ -6,24 +6,129 @@ import { DatePicker, Select, InputNumber, - Modal + Modal, + Cascader, + message, + Upload, + UploadFile } from "antd"; +import type { GetProp, UploadProps } from 'antd'; +import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'; +import { useEffect, useState } from "react"; +import { get ,uploadImageUrl,DevUserId,downloadUrl} from "../../../../util/AjaxUtils"; // import type { InputNumberProps } from 'antd'; import locale from 'antd/es/date-picker/locale/zh_CN'; import './EditModal.css' -import { useState } from "react"; +import { ITree } from "../../../../interfaces/dict/IDict"; const dateFormat = 'YYYY年MM月DD日'; const { TextArea } = Input; +interface Option { + value?: string | number | null; + label: React.ReactNode; + children?: Option[]; + isLeaf?: boolean; + id: string; + pId: string; +} +type FileType = Parameters>[0]; export default function EditModal(props: any) { + const [messageApi, contextHolder] = message.useMessage(); + const height = window.innerHeight - 180; + const [areaArray, setAreaArray] = useState([]); + const listArea = (pId: string) => { + return new Promise((resolve) => { + get({ + messageApi, + url: '/api/area/list-area-ztree', + config: { + params: { + id: pId + } + }, + onSuccess({ data }) { + resolve(data); + } + }) + }) + } const [form] = Form.useForm(); const [promptModal, setPromptModal] = useState(false) + // 上传图片 + const [logoImgArray, setLogoImgArray] = useState([]); + const beforeUpload = (file: FileType) => { + const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; + if (!isJpgOrPng) { + message.error('只能上传 JPG/PNG 格式文件!'); + } + // 限制图片大小 + // const isLt2M = file.size / 1024 / 1024 < 2; + // if (!isLt2M) { + // message.error('Image must smaller than 2MB!'); + // } + // return isJpgOrPng && isLt2M; + return isJpgOrPng; + }; + + const [loading, setLoading] = useState(false); + // const [imageUrl, setImageUrl] = useState(); + + + const handleChange: UploadProps['onChange'] = (info) => { + if (info.file.status === 'uploading') { + setLoading(true); + return; + } + if (info.file.status === 'done') { + setLoading(false); + const fileId = info.file.response.data.fileId; + const url = downloadUrl(fileId); + logoImgArray.splice(0, 1, { + uid: info.file.response.data.fileId, + name: 'xixi.png', + status: 'done', + url: url, + thumbUrl: url, + }) + setLogoImgArray([ + ...logoImgArray + ]) + return; + } + }; + + const uploadButton = ( + + ); + useEffect(() => { + listArea('0').then(data => { + console.log('省市1', data); + // data.slice(0, 2).map + const options: Option[] = data.map(item => { + return { + value: item.name, + label: item.name, + isLeaf: !item.isParent, + id: item.id, + pId: item.pId + } + }) + + setAreaArray(options); + // console.log('省市2', options); + }); + + }, []) + return (
+ {contextHolder}
软著信息
-
+
@@ -54,11 +159,37 @@ export default function EditModal(props: any) {
+
+ { + logoImgArray.splice(0) + setLogoImgArray([ + ...logoImgArray + ]) + }} + > + {logoImgArray.length > 0 ? avatar : uploadButton} + +
+
+ {logoImgArray.length > 0 ?'点击图片更换':'点击+上传图片'} + +
@@ -78,7 +209,7 @@ export default function EditModal(props: any) { rules={[{ required: true, message: '请输入软著简称' }]} > @@ -94,7 +225,7 @@ export default function EditModal(props: any) { rules={[{ required: true, message: '请输入软著证号' }]} > @@ -112,8 +243,11 @@ export default function EditModal(props: any) { rules={[{ required: true, message: '请输入软著说明' }]} >