You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
575 lines
41 KiB
575 lines
41 KiB
|
|
|
|
<Card
|
|
><table ><tbody>
|
|
|
|
{ taolonglist.map((value,index)=>(
|
|
<React.Fragment >
|
|
<tr><td style={{width:"550px"}}>
|
|
<React.Fragment >
|
|
{value.lx==="wb"?<h4 style={{width:"550px"}}> {value.wb}</h4>:null}
|
|
{value.lx==="pic"? <img
|
|
src={!value.show?value.pic:value.xiugaipic}
|
|
width="550px" height="auto"/> : null}
|
|
{value.lx==="video"?<video src={!value.show? value.sp:value.xiugaisp} width="550px" height="auto" controls={true}></video>:null}
|
|
{value.lx==="download"?<a href={value.url} style={{width:"550px"}} >{value.title}</a>:null}
|
|
|
|
</React.Fragment></td>
|
|
|
|
<td ><Button onClick={e=>{
|
|
let temp=[...taolonglist]
|
|
temp[index].show=!temp[index].show;
|
|
settaolonglist(temp);
|
|
}}>修改</Button><Popconfirm
|
|
title="确认要删除此项吗"
|
|
onConfirm={event => {
|
|
let temp=[...taolonglist]
|
|
temp.splice(index,1)
|
|
settaolonglist(temp);
|
|
}}
|
|
onCancel={event => alert("no")}
|
|
okText="确认"
|
|
cancelText="不"
|
|
>
|
|
<Button onClick={e=>{
|
|
|
|
}} href="#">删除</Button>
|
|
</Popconfirm>
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
{value.show ?
|
|
<tr>
|
|
<td colSpan={3}>
|
|
<React.Fragment>
|
|
<h3>编辑</h3>
|
|
<Tabs activeKey={value.leixing} onChange={e => {
|
|
let temp = [...taolonglist]
|
|
temp[index].leixing = e;
|
|
settaolonglist(temp);
|
|
}} tabBarStyle={{}} style={{width:"720px"}}>
|
|
<Tabs.TabPane tab="视频" key="video">
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<video src={value.xiugaisp} width="600px"
|
|
height="auto"
|
|
style={{display: "none"}}/>
|
|
</td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
视频路径
|
|
<Input value={value.xiugailujing}
|
|
onChange={event => {
|
|
let temp = [...taolonglist];
|
|
temp[index].xiugailujing = event.target.value;
|
|
settaolonglist(temp);
|
|
|
|
}} width="550px"
|
|
style={{width:"550px"}}
|
|
></Input>
|
|
</td>
|
|
|
|
<td><Button onClick={e => {
|
|
let temp = [...taolonglist];
|
|
temp[index].xiugaisp = temp[index].xiugailujing;
|
|
|
|
settaolonglist(temp);
|
|
}}>打开</Button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<Upload
|
|
name='file'
|
|
action={HOUDUAN+'api/uploadtm'}
|
|
headers={{
|
|
th: value.uuid,
|
|
xx: fujianuuid,
|
|
lx: "kaoshi"
|
|
}}
|
|
onChange={
|
|
(info) => {
|
|
if (info.file.status !== 'uploading') {
|
|
console.log(info.file, info.fileList);
|
|
}
|
|
if (info.file.status === 'done') {
|
|
//setTms(uuid.v4())
|
|
message.success(`${info.file.name} file uploaded successfully`);
|
|
|
|
_.delay(() => {
|
|
console.log('Done after 1 second');
|
|
const temp = [...taolonglist];
|
|
temp[index].xiugaisp = ZHIYUE+ value.uuid + "/" + fujianuuid + path.extname(info.file.name);
|
|
settaolonglist(temp);
|
|
setFujianuuid(uuid.v4())
|
|
//settaolonglist(uuid.v4())
|
|
}, 200);
|
|
} else if (info.file.status === 'error') {
|
|
message.error(`${info.file.name} file upload failed.`);
|
|
}
|
|
}
|
|
}
|
|
showUploadList={false}><Button>
|
|
<Icon type="upload"/>上传附件
|
|
|
|
</Button>
|
|
</Upload>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<Button onClick={e => {
|
|
let temp = [...taolonglist];
|
|
temp[index].sp = temp[index].xiugaisp;
|
|
temp[index].lx = temp[index].leixing
|
|
settaolonglist(temp);
|
|
}}>确认</Button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</Tabs.TabPane>
|
|
<Tabs.TabPane tab="图片" key="pic">
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<img src={value.xiugaipic} width="600px"
|
|
height="auto"
|
|
style={{display: "none"}}/>
|
|
</td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span>图片路径
|
|
|
|
<Input value={value.xiugailujing} onChange={event => {
|
|
let temp = [...taolonglist];
|
|
temp[index].xiugailujing = event.target.value;
|
|
settaolonglist(temp);
|
|
}}
|
|
width="550px"
|
|
style={{width:"550px"}}
|
|
></Input></span>
|
|
</td>
|
|
|
|
<td><Button onClick={e => {
|
|
let temp = [...taolonglist];
|
|
temp[index].xiugaipic = temp[index].xiugailujing;
|
|
settaolonglist(temp);
|
|
//settaolonglist(uuid.v4())
|
|
}}>打开</Button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<Upload
|
|
name='file'
|
|
action={HOUDUAN+'api/uploadtm'}
|
|
headers={{
|
|
th: value.uuid,
|
|
xx: fujianuuid,
|
|
lx: "kaoshi"
|
|
}}
|
|
onChange={
|
|
(info) => {
|
|
if (info.file.status !== 'uploading') {
|
|
console.log(info.file, info.fileList);
|
|
}
|
|
if (info.file.status === 'done') {
|
|
//setTms(uuid.v4())
|
|
message.success(`${info.file.name} file uploaded successfully`);
|
|
|
|
_.delay(() => {
|
|
console.log('Done after 1 second');
|
|
const temp = [...taolonglist];
|
|
temp[index].xiugaipic = ZHIYUE+value.uuid + "/" + fujianuuid + path.extname(info.file.name);
|
|
settaolonglist(temp);
|
|
setFujianuuid(uuid.v4());
|
|
|
|
}, 200);
|
|
} else if (info.file.status === 'error') {
|
|
message.error(`${info.file.name} file upload failed.`);
|
|
}
|
|
}
|
|
}
|
|
showUploadList={false}><Button>
|
|
<Icon type="upload"/>上传附件
|
|
|
|
</Button>
|
|
</Upload>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><Button onClick={e => {
|
|
let temp = [...taolonglist];
|
|
temp[index].pic = temp[index].xiugaipic;
|
|
temp[index].lx = temp[index].leixing
|
|
settaolonglist(temp);
|
|
}}>保存</Button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</Tabs.TabPane>
|
|
<Tabs.TabPane tab="附件" key="download">
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>文件标题</td>
|
|
<td style={{width: "400px"}}>
|
|
<Input value={value.xiugai} onChange={e => {
|
|
let temp = [...taolonglist];
|
|
temp[index].xiugai = e.target.value;
|
|
settaolonglist(temp);
|
|
}}
|
|
width="550px"
|
|
style={{width:"550px"}}
|
|
></Input>
|
|
</td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
文件路径
|
|
</td>
|
|
<td>
|
|
<Input value={value.xiugaiwj}
|
|
onChange={event => {
|
|
let temp = [...taolonglist];
|
|
temp[index].xiugaiwj = event.target.value;
|
|
temp[index].lx = temp[index].leixing
|
|
settaolonglist(temp);
|
|
|
|
}}
|
|
width="550px"
|
|
style={{width:"550px"}}
|
|
></Input></td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<Upload
|
|
name='file'
|
|
action={HOUDUAN+'api/uploadtm'}
|
|
headers={{
|
|
th: value.uuid,
|
|
xx: fujianuuid,
|
|
lx: "kaoshi"
|
|
}}
|
|
onChange={
|
|
(info) => {
|
|
if (info.file.status !== 'uploading') {
|
|
console.log(info.file, info.fileList);
|
|
}
|
|
if (info.file.status === 'done') {
|
|
//setTms(uuid.v4())
|
|
message.success(`${info.file.name} file uploaded successfully`);
|
|
|
|
_.delay(() => {
|
|
console.log('Done after 1 second');
|
|
const temp = [...taolonglist];
|
|
temp[index].xiugaiwj = ZHIYUE+value.uuid + "/" + fujianuuid + path.extname(info.file.name);
|
|
temp[index].xiugai = info.file.name;
|
|
settaolonglist(temp);
|
|
setFujianuuid(uuid.v4())
|
|
}, 200);
|
|
} else if (info.file.status === 'error') {
|
|
message.error(`${info.file.name} file upload failed.`);
|
|
}
|
|
}
|
|
}
|
|
showUploadList={false}><Button>
|
|
<Icon type="upload"/>上传附件
|
|
|
|
</Button>
|
|
</Upload>
|
|
<Button onClick={e => {
|
|
let temp = [...taolonglist];
|
|
temp[index].url = temp[index].xiugaiwj;
|
|
temp[index].title = temp[index].xiugai;
|
|
temp[index].lx = temp[index].leixing
|
|
settaolonglist(temp);
|
|
}}>保存</Button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</Tabs.TabPane>
|
|
<Tabs.TabPane tab="文字" key="wb">
|
|
|
|
<Input.TextArea value={value.xiugaiwb}
|
|
onChange={event => {
|
|
let temp = [...taolonglist];
|
|
temp[index].xiugaiwb = event.target.value;
|
|
temp[index].lx = temp[index].leixing
|
|
settaolonglist(temp);
|
|
}} width="550px"
|
|
style={{width:"550px"}}
|
|
></Input.TextArea>
|
|
<Button onClick={e => {
|
|
let temp = [...taolonglist]
|
|
temp[index].wb = temp[index].xiugaiwb;
|
|
settaolonglist(temp);
|
|
}}>修改</Button>
|
|
</Tabs.TabPane>
|
|
</Tabs>
|
|
</React.Fragment>
|
|
</td>
|
|
</tr>
|
|
:null}
|
|
|
|
</React.Fragment>
|
|
))}
|
|
|
|
</tbody></table></Card>
|
|
<Card>
|
|
<Tabs activeKey={add.leixing} onChange={e=>{
|
|
let temp={...add};
|
|
|
|
temp.leixing=e;
|
|
|
|
setAdd(temp)
|
|
}}>
|
|
<Tabs.TabPane tab="视频" key="video">
|
|
<table><tbody>
|
|
<tr ><td >
|
|
<video src={add.xiugaisp} width="600px" height="auto" controls={true}/>
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr><td>
|
|
<Upload
|
|
name='file'
|
|
action={HOUDUAN+'api/uploadtm'}
|
|
headers={{
|
|
th: add.uuid ,
|
|
xx: fujianuuid,
|
|
lx: "kaoshi"
|
|
}}
|
|
onChange={
|
|
(info) => {
|
|
if (info.file.status !== 'uploading') {
|
|
console.log(info.file, info.fileList);
|
|
}
|
|
if (info.file.status === 'done') {
|
|
//setTms(uuid.v4())
|
|
message.success(`${info.file.name} file uploaded successfully`);
|
|
|
|
_.delay(() => {
|
|
console.log('Done after 1 second');
|
|
const temp={...add};
|
|
temp.xiugaisp=ZHIYUE+add.uuid+"/"+fujianuuid + path.extname(info.file.name);
|
|
setAdd(temp);
|
|
setFujianuuid(uuid.v4())
|
|
}, 200);
|
|
} else if (info.file.status === 'error') {
|
|
message.error(`${info.file.name} file upload failed.`);
|
|
}
|
|
}
|
|
}
|
|
showUploadList={false}><Button>
|
|
<Icon type="upload"/>上传附件
|
|
|
|
</Button>
|
|
</Upload>
|
|
</td></tr>
|
|
<tr>
|
|
<td>文件路径
|
|
<Input value={add.url} width="400px" onChange={event => {
|
|
let temp={...add};
|
|
temp.url=event.target.value;
|
|
setAdd(temp);
|
|
}}></Input>
|
|
<Button onClick={e=>{
|
|
let temp={...add};
|
|
temp.xiugaisp=temp.url;
|
|
setAdd(temp);
|
|
}
|
|
}>应用</Button>
|
|
</td>
|
|
|
|
</tr>
|
|
</tbody></table>
|
|
</Tabs.TabPane>
|
|
<Tabs.TabPane tab="图片" key="pic">
|
|
<tr>
|
|
<td>
|
|
<img src={add.xiugaipic} width="600px" height="auto"/>
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>
|
|
<Upload
|
|
name='file'
|
|
action={HOUDUAN+'api/uploadtm'}
|
|
headers={{
|
|
th: add.uuid,
|
|
xx: fujianuuid,
|
|
lx: "kaoshi"
|
|
}}
|
|
onChange={
|
|
(info) => {
|
|
if (info.file.status !== 'uploading') {
|
|
console.log(info.file, info.fileList);
|
|
}
|
|
if (info.file.status === 'done') {
|
|
//setTms(uuid.v4())
|
|
message.success(`${info.file.name} file uploaded successfully`);
|
|
|
|
_.delay(() => {
|
|
console.log('Done after 1 second');
|
|
const temp = {...add};
|
|
temp.xiugaipic =ZHIYUE+ add.uuid + "/" + fujianuuid + path.extname(info.file.name);
|
|
setAdd(temp);
|
|
setFujianuuid(uuid.v4())
|
|
}, 200);
|
|
} else if (info.file.status === 'error') {
|
|
message.error(`${info.file.name} file upload failed.`);
|
|
}
|
|
}
|
|
}
|
|
showUploadList={false}><Button>
|
|
<Icon type="upload"/>上传附件
|
|
|
|
</Button>
|
|
</Upload>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>文件路径
|
|
<Input value={add.url} width="400px" onChange={event => {
|
|
let temp = {...add};
|
|
temp.url = event.target.value;
|
|
setAdd(temp);
|
|
}}></Input>
|
|
<Button onClick={e => {
|
|
let temp = {...add};
|
|
temp.xiugaipic = temp.url;
|
|
setAdd(temp);
|
|
}
|
|
}>应用</Button>
|
|
</td>
|
|
|
|
</tr>
|
|
</Tabs.TabPane>
|
|
<Tabs.TabPane tab="附件" key="download">
|
|
<tr>
|
|
<td><a href={add.xiugailujing}>{add.xiugai}</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>文件标题</td>
|
|
<td >
|
|
<Input value={add.xiugai} onChange={event => {
|
|
let temp={...add}
|
|
temp.xiugai=event.target.value;
|
|
setAdd(temp);
|
|
}}></Input>
|
|
</td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<td>文件路径</td>
|
|
<td style={{width:"350px"}}>
|
|
<Input value={add.xiugailujing} onChange={event => {
|
|
let temp={...add};
|
|
temp.xiugailujing=event.target.value;
|
|
setAdd(temp);
|
|
}}></Input></td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<Upload
|
|
name='file'
|
|
action={HOUDUAN+'api/uploadtm'}
|
|
headers={{
|
|
th: add.uuid ,
|
|
xx: fujianuuid,
|
|
lx: "kaoshi"
|
|
}}
|
|
onChange={
|
|
(info) => {
|
|
if (info.file.status !== 'uploading') {
|
|
console.log(info.file, info.fileList);
|
|
}
|
|
if (info.file.status === 'done') {
|
|
//setTms(uuid.v4())
|
|
message.success(`${info.file.name} file uploaded successfully`);
|
|
|
|
_.delay(() => {
|
|
|
|
console.log('Done after 1 second');
|
|
const temp = {...add};
|
|
temp.xiugai=info.file.name;
|
|
temp.xiugailujing = ZHIYUE+ add.uuid + "/" + fujianuuid + path.extname(info.file.name)
|
|
setAdd(temp)
|
|
setFujianuuid(uuid.v4());
|
|
|
|
}, 200);
|
|
} else if (info.file.status === 'error') {
|
|
message.error(`${info.file.name} file upload failed.`);
|
|
}
|
|
}
|
|
}
|
|
showUploadList={false}><Button>
|
|
<Icon type="upload"/>上传附件
|
|
|
|
</Button>
|
|
</Upload>
|
|
</td></tr>
|
|
</Tabs.TabPane>
|
|
<Tabs.TabPane tab="文字" key="wb">
|
|
<Input.TextArea value={add.xiugaiwb} onChange={event => {
|
|
let temp={...add};
|
|
temp.xiugaiwb=event.target.value;
|
|
setAdd(temp);
|
|
}} style={{height:"250px"}}></Input.TextArea>
|
|
</Tabs.TabPane>
|
|
|
|
</Tabs>
|
|
<Button onClick={
|
|
// {value.lx==="wb"?<h4>{value.wb}</h4>:null}
|
|
// {value.lx==="pic"? <img
|
|
// src={value.pic}
|
|
// width="600px" height="auto"/> : null}
|
|
// {value.lx==="video"?<video src={value.sp} width="600px" height="auto" controls={true}></video>:null}
|
|
// {value.lx==="download"?<a href={value.url}>{value.title}</a>:null}
|
|
e=>{
|
|
const xiang={
|
|
lx:add.leixing,
|
|
leixing:add.leixing,
|
|
wb:add.xiugaiwb,
|
|
xiugaiwb:add.xiugaiwb,
|
|
pic:add.xiugaipic,
|
|
xiugaiwj:add.xiugailujing,//修改附件路径
|
|
xiugaipic:add.xiugaipic,
|
|
sp:add.xiugaisp,
|
|
xiugaisp:add.xiugaisp,
|
|
|
|
xiugailujing:add.xiugailujing,
|
|
url:add.xiugailujing,
|
|
xiugai:add.xiugai,
|
|
title:add.xiugai,
|
|
show:false
|
|
|
|
}
|
|
let temp=[...taolonglist]
|
|
temp.push(xiang);
|
|
settaolonglist(temp);
|
|
const addtemp={leixing:add.leixing,uuid:uuid.v4()}
|
|
setAdd(addtemp);
|
|
}
|
|
}>
|
|
添加
|
|
</Button>
|
|
</Card>
|