index.jsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390
  1. import React,{Component}from 'react';
  2. import {Button, DatePicker, Icon, Input, message, Modal, Popconfirm, Select, Table} from "antd";
  3. import SpinContainer from "../../../SpinContainer";
  4. import $ from "jquery/src/ajax";
  5. import moment from "moment";
  6. import AddShare from '../product/addShare';
  7. import {getPicPath} from "@/tools.js";
  8. const { RangePicker } = DatePicker;
  9. class WeappShare extends Component{
  10. constructor(props) {
  11. super(props);
  12. this.state={
  13. pageNo: 1,
  14. searchUserName: '',
  15. projectType: '',
  16. loading: false,
  17. imgeditvisible: false,
  18. maximg: '',
  19. columns:[
  20. {
  21. title: '序号',
  22. dataIndex: 'key',
  23. key: 'key'
  24. },
  25. {
  26. title: '分享标题',
  27. dataIndex: 'title',
  28. key: 'title',
  29. },
  30. {
  31. title: '分享位置',
  32. dataIndex: 'type',
  33. key: 'type',
  34. render: type => (
  35. type === 0 ? '项目详情' :
  36. type === 1 ? '首页' : ''
  37. )
  38. },
  39. {
  40. title: '朋友分享缩略图',
  41. dataIndex: 'shareUrl',
  42. key: 'shareUrl',
  43. render: url => {
  44. let path = getPicPath(globalConfig.avatarUploadHost, url);
  45. return (
  46. <div style={{
  47. display: 'flex',
  48. alignItems: 'center',
  49. }}>
  50. <img src={path} style={{ width: "100px", height: 50 }} />
  51. <Button
  52. className="buttonimg"
  53. style={{ marginLeft: 10 }}
  54. onClick={e => {
  55. e.stopPropagation();
  56. this.setState({
  57. imgeditvisible: true,
  58. maximg: path,
  59. })
  60. }}
  61. >
  62. 查看大图
  63. </Button>
  64. </div>
  65. );
  66. }
  67. },
  68. {
  69. title: '朋友圈分享缩略图',
  70. dataIndex: 'momentsUrl',
  71. key: 'momentsUrl',
  72. render: url => {
  73. let path = getPicPath(globalConfig.avatarUploadHost, url);
  74. return (
  75. <div style={{
  76. display: 'flex',
  77. alignItems: 'center',
  78. }}>
  79. <img src={path} style={{ width: "100px", height: 50 }} />
  80. <Button
  81. className="buttonimg"
  82. style={{ marginLeft: 10 }}
  83. onClick={e => {
  84. e.stopPropagation();
  85. this.setState({
  86. imgeditvisible: true,
  87. maximg: path,
  88. })
  89. }}
  90. >
  91. 查看大图
  92. </Button>
  93. </div>
  94. );
  95. }
  96. },
  97. {
  98. title: "操作",
  99. dataIndex: "aab",
  100. key: "aab",
  101. render: (text, record) => {
  102. return (
  103. <div>
  104. <Button
  105. type="primary"
  106. onClick={(e) => {
  107. e.stopPropagation();
  108. this.edit(record);
  109. }}
  110. >
  111. 编辑
  112. </Button>
  113. <Popconfirm
  114. placement="top"
  115. title={"是否确认删除?"}
  116. onConfirm={e => {
  117. e.stopPropagation();
  118. this.delete(record.id);
  119. }}
  120. okText="确认"
  121. cancelText="取消"
  122. >
  123. <Button
  124. type="primary"
  125. style={{ marginLeft: 10,background:'#f00' }}
  126. onClick={(e)=>{
  127. e.stopPropagation();
  128. }}
  129. >
  130. 删除
  131. </Button>
  132. </Popconfirm>
  133. </div>
  134. );
  135. }
  136. }
  137. ],
  138. dataSource:[],
  139. pagination: {
  140. defaultCurrent: 1,
  141. defaultPageSize: 10,
  142. showQuickJumper: true,
  143. pageSize: 10,
  144. onChange: function (page) {
  145. this.loadData(page);
  146. }.bind(this),
  147. showTotal: function (total) {
  148. return '共' + total + '条数据';
  149. }
  150. },
  151. visible:false,
  152. }
  153. this.search = this.search.bind(this);
  154. this.reset = this.reset.bind(this);
  155. this.tableRowClick = this.tableRowClick.bind(this);
  156. this.loadData = this.loadData.bind(this);
  157. this.addProduct = this.addProduct.bind(this);
  158. this.onCancel = this.onCancel.bind(this);
  159. this.edit = this.edit.bind(this);
  160. this.delete = this.delete.bind(this);
  161. this.homeOperation = this.homeOperation.bind(this);
  162. }
  163. search(){this.loadData();}
  164. reset(){
  165. this.setState({
  166. projectType:'',
  167. searchUserName: '',
  168. },()=>{
  169. this.loadData();
  170. })
  171. }
  172. tableRowClick(value){
  173. console.log(value)
  174. this.setState({
  175. visible:true,
  176. id:value.pid,
  177. shareType:value.type+'',
  178. infor:value,
  179. shareId:value.id,
  180. })
  181. }
  182. edit(value){
  183. this.setState({
  184. visible:true,
  185. id:value.pid,
  186. infor:value,
  187. shareType:value.type+'',
  188. shareId:value.id,
  189. })
  190. }
  191. loadData(pageNo = 1) {
  192. this.setState({
  193. loading: true
  194. });
  195. $.ajax({
  196. method: "get",
  197. dataType: "json",
  198. crossDomain: false,
  199. url: globalConfig.context + "/api/admin/weChatShare/pageList",
  200. data: {
  201. pageNo: pageNo || 1,
  202. pageSize: 10,
  203. name: this.state.searchUserName || undefined,
  204. type: this.state.projectType,
  205. }
  206. }).done((data1) => {
  207. if (data1.error.length !== 0) {
  208. message.warning(data1.error[0].message);
  209. } else {
  210. for (let i = 0; i < data1.data.list.length; i++) {
  211. data1.data.list[i].key = (data1.data.pageNo-1)*10+(i+1);
  212. }
  213. this.state.pagination.current = data1.data.pageNo;
  214. this.state.pagination.total = data1.data.totalCount;
  215. }
  216. this.setState({
  217. dataSource: data1.data.list,
  218. pagination: this.state.pagination,
  219. pageNo: data1.data.pageNo
  220. });
  221. }).always(function () {
  222. this.setState({
  223. loading: false
  224. });
  225. }.bind(this))
  226. }
  227. addProduct(){
  228. this.setState({visible:false,shareType:'',shareId:''});
  229. this.loadData(this.state.pageNo)
  230. }
  231. onCancel(){
  232. this.setState({
  233. visible:false,
  234. id:'',
  235. infor:'',
  236. shareType:'',
  237. shareId:'',
  238. })
  239. }
  240. homeOperation(id,host){
  241. this.setState({
  242. loading: true
  243. });
  244. $.ajax({
  245. method: "post",
  246. dataType: "json",
  247. crossDomain: false,
  248. url: globalConfig.context + "/api/admin/project/update",
  249. data: {
  250. id,
  251. host
  252. },
  253. success: function(data) {
  254. if (data.error && data.error.length) {
  255. message.warning(data.error[0].message);
  256. } else {
  257. message.warning('操作成功');
  258. this.loadData(this.state.pageNo);
  259. }
  260. }.bind(this)
  261. }).always(
  262. function() {
  263. this.setState({
  264. loading: false
  265. });
  266. }.bind(this)
  267. );
  268. }
  269. delete(id){
  270. this.setState({
  271. loading: true
  272. });
  273. $.ajax({
  274. method: "post",
  275. dataType: "json",
  276. crossDomain: false,
  277. url: globalConfig.context + "/api/admin/weChatShare/delete",
  278. data: {
  279. id
  280. },
  281. success: function(data) {
  282. if (data.error && data.error.length) {
  283. message.warning(data.error[0].message);
  284. } else {
  285. message.warning('删除成功');
  286. this.loadData(this.state.pageNo);
  287. }
  288. }.bind(this)
  289. }).always(
  290. function() {
  291. this.setState({
  292. loading: false
  293. });
  294. }.bind(this)
  295. );
  296. }
  297. componentDidMount() {
  298. this.loadData();
  299. }
  300. imghandleCancel() {
  301. this.setState({
  302. imgeditvisible: false
  303. });
  304. }
  305. render() {
  306. return (
  307. <div className="user-content" >
  308. <div className="content-title">
  309. <span>小程序分享管理</span>
  310. </div>
  311. <div className="user-search">
  312. <Input
  313. placeholder="请输入分享标题"
  314. value={this.state.searchUserName}
  315. onChange={(e) => { this.setState({ searchUserName: e.target.value }); }}
  316. style={{
  317. marginRight: "10px",
  318. marginBottom: "10px"
  319. }}
  320. />
  321. <Select
  322. style={{width:130}}
  323. value={this.state.projectType || undefined}
  324. placeholder="请选择分享位置"
  325. onChange={e => {
  326. this.setState({
  327. projectType: e
  328. });
  329. }}
  330. >
  331. <Option value={0}>项目详情</Option>
  332. <Option value={1}>首页</Option>
  333. </Select>
  334. <Button type="primary" onClick={this.search} style={{marginLeft:'10px'}}>搜索</Button>
  335. <Button onClick={this.reset}>重置</Button>
  336. <Button
  337. type="primary"
  338. onClick={()=>{this.setState({visible:true,shareType: '',shareId:''})}}
  339. style={{ marginLeft: "100px" }}
  340. >
  341. 新增分享
  342. </Button>
  343. </div>
  344. <div className="patent-table">
  345. <SpinContainer spinning={this.state.loading}>
  346. <Table columns={this.state.columns}
  347. dataSource={this.state.dataSource}
  348. pagination={this.state.pagination}
  349. onRowClick={this.tableRowClick} />
  350. </SpinContainer>
  351. </div>
  352. {this.state.visible ? <AddShare
  353. id={this.state.id}
  354. shareType={this.state.shareType}
  355. shareId={this.state.shareId}
  356. infor={this.state.infor}
  357. visible={this.state.visible}
  358. onOk={this.addProduct}
  359. onCancel={this.onCancel}
  360. /> : null}
  361. <Modal
  362. visible={this.state.imgeditvisible}
  363. onCancel={()=>{this.imghandleCancel()}}
  364. onOk={()=>{this.imghandleCancel()}}
  365. footer={false}
  366. >
  367. <img style={{ width: "100%" }} src={this.state.maximg} />
  368. </Modal>
  369. </div >
  370. )
  371. }
  372. }
  373. export default WeappShare;