import React, { Component } from "react";
import {
Table,
Modal,
message,
Spin,
Input,
Select,
Button,
Form,
Upload,
Popconfirm,
AutoComplete,
DatePicker,
Col,
Tabs,
Tag,
Radio,
Group,
InputNumber,
} from "antd";
import SpinContainer from "../../SpinContainer";
import $ from "jquery/src/ajax";
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const Option = AutoComplete.Option;
const confirm = Modal.confirm;
class Links extends Component {
constructor(props) {
super(props);
this.state = {
dataView: null,
PublicView: null,
contentView: "",
remarksView: "",
contentViewLength: 0,
contentViewLength1: 0,
hid:'none',
pagination: {
defaultCurrent: 1,
defaultPageSize: 10,
showQuickJumper: true,
pageSize: 10,
onChange: function (page) {
this.linkList(page);
this.setState({
selectedRowKeys: [],
});
}.bind(this),
showTotal: function (total) {
return "共" + total + "条数据";
},
},
columns: [
{
title: "序号",
dataIndex: "id",
key: "id",
width: "80px",
},
{
title: "排序",
dataIndex: "sort",
key: "sort",
width: "80px",
},
{
title: "友情链接地址",
dataIndex: "url",
key: "url",
width: "100",
},
{
title: "显示名称",
dataIndex: "name",
key: "name",
width: "100",
},
{
title: "互链",
dataIndex: "mutualChain",
key: "mutualChain",
width: "100",
render: (text, record) => {
return
{text == 0 ? "否" : "是"}
;
},
},
{
title: "备注",
dataIndex: "remarks",
key: "remarks",
width: "100",
},
{
title: "状态",
dataIndex: "status",
key: "status",
width: "100",
render: (text, record) => {
return {text == 0 ? "正常" : "冻结"}
;
},
},
{
title: "操作",
dataIndex: "cz",
key: "cz",
width: "100px",
render: (text, record) => {
return (
this.linksUpdate(record)}
okText="确定"
cancelText="取消"
>
);
},
},
],
dataSourceView: [],
coorVisible: "none",
list: [],
visible: false,
viewKey: 0,
modalView: false,
modalRecord: false,
closable: false,
disabledView: "none",
loading: false,
};
this.formRef = {};
this.submitOrder = this.submitOrder.bind(this);
this.linkList = this.linkList.bind(this);
this.linksUpdate = this.linksUpdate.bind(this);
this.reset = this.reset.bind(this);
this.tableRowClick = this.tableRowClick.bind(this)
this.cleanAllLinks = this.cleanAllLinks.bind(this)
}
componentDidMount() {
this.linkList(1);
}
// 清除缓存
cleanAllLinks() {
$.ajax({
method: "get",
dataType: "json",
crossDomain: false,
url: globalConfig.context + "/api/admin/links/cleanAllLinks",
success: function (data) {
if (data.error.length) {
this.setState({
loading: false,
});
message.warning(data.error[0].message);
} else {
message.success("清除成功");
}
}.bind(this),
}).always(
function () {
this.setState({
loading: false,
});
}.bind(this)
);
}
// 修改链接状态
linksUpdate(record) {
if (!this.state.sort && !record.sort) {
message.warning("请填写排序");
return;
} else if (!this.state.url && !record.url) {
message.warning("请填写友情链接");
return;
} else if (!this.state.name && !record.name) {
message.warning("请输入链接名");
return;
}
// console.log(record);
// console.log(this.state.status);
$.ajax({
method: "post",
dataType: "json",
crossDomain: false,
url: globalConfig.context + "/api/admin/links/update",
data: {
sort: record.sort || this.state.sort,
status: record.status == 0 ? '1' :'0' || this.state.status,
mutualChain: record.mutualChain || this.state.mutualChain,
name: record.name || this.state.name,
url: record.url || this.state.url,
remarks: record.remarks || this.state.remarks,
id: record.id || this.state.id,
},
success: function (data) {
if (data.error.length) {
this.setState({
loading: false,
});
message.warning(data.error[0].message);
} else {
this.setState({
visible:false,
hid:'none'
})
this.linkList(1);
message.success("修改成功");
}
}.bind(this),
}).always(
function () {
this.setState({
loading: false,
});
}.bind(this)
);
}
reset() {
this.setState({
sortType1: undefined,
name1: undefined,
mutualChain1: undefined,
status1: undefined,
},()=>{
this.linkList();
});
}
// 新增友情链接
submitOrder() {
if (!this.state.sort) {
message.warning("请填写排序");
return;
} else if (!this.state.url) {
message.warning("请填写友情链接");
return;
} else if (!this.state.name) {
message.warning("请输入链接名");
return;
}
this.setState({
loading: true,
});
$.ajax({
method: "post",
dataType: "json",
crossDomain: false,
url: globalConfig.context + "/api/admin/links/add",
data: {
sort: this.state.sort,
status: 0,
mutualChain: this.state.mutualChain || 0,
name: this.state.name,
url: this.state.url,
remarks: this.state.remarks,
},
success: function (data) {
if (data.error.length) {
this.setState({
loading: false,
});
message.warning(data.error[0].message);
} else {
this.setState({
loading: false,
visible: false,
viewKey: this.state.viewKey + 1,
sort: "",
mutualChain: "",
name: "",
url: "",
remarks: "",
});
this.linkList(1);
// this.assistList();
message.success("添加成功");
}
}.bind(this),
}).always(
function () {
this.setState({
loading: false,
});
}.bind(this)
);
}
linkList(page) {
$.ajax({
method: "get",
dataType: "json",
crossDomain: false,
url: globalConfig.context + "/api/admin/links/list",
data: {
sortType: this.state.sortType1 || undefined,
name: this.state.name1 || undefined,
mutualChain: this.state.mutualChain1 || undefined,
status: this.state.status1 || undefined,
pageNo: page || 1,
pageSize: 10,
},
success: function (data) {
if (data.error.length) {
this.setState({
loading: false,
});
message.warning(data.error[0].message);
} else {
this.setState({
list: data.data.list,
pagination: this.state.pagination
});
this.state.pagination.total = data.data.totalCount;
this.state.pagination.current = data.data.pageNo;
}
if (data.data && data.data.list && !data.data.list.length) {
this.state.pagination.total = 0;
}
}.bind(this),
}).always(
function () {
this.setState({
loading: false,
});
}.bind(this)
);
}
// 双击表格弹出修改
tableRowClick(record) {
this.setState({
visible:true,
sort: record.sort,
status: record.status,
mutualChain: record.mutualChain,
name: record.name,
url: record.url,
remarks: record.remarks,
id:record.id,
hid:'block'
})
}
render() {
const formItemLayout = {
labelCol: { span: 8 },
wrapperCol: { span: 14 },
};
return (
产品管理
{/* 显示名称关键字 */}
{
this.setState({ name1: e.target.value });
}}
/>
{/* 互链 */}
{/* */}
{
this.setState({
visible: false,
viewKey: this.state.viewKey + 1,
});
}}
onOk={() => {}}
footer={false}
>
{
if(isNaN(e)) {
message.info("请输入数字")
}
this.setState({ sort: e });
}}
/>
数字越大排序越前
{
this.setState({ url: e.target.value });
}}
/>
请输入http://地址
{
this.setState({ name: e.target.value });
}}
/>
{
this.setState({
mutualChain: e.target.value,
});
}}
value={this.state.mutualChain || 0}
>
否
是
);
}
}
export default Links;