barList.jsx 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574
  1. import React, { Component } from "react";
  2. import { Button, Modal, Form, AutoComplete, TreeSelect, Input, message, Spin, Select, Tabs, Table, } from "antd";
  3. import $ from "jquery/src/ajax";
  4. import { ShowModal, getBarLevel } from "@/tools";
  5. import moment from "moment";
  6. import './index.less'
  7. import ShowModalDiv from "@/showModal.jsx";
  8. import { ChooseList } from "../../order/orderNew/chooseList";
  9. import Operation from "./operation"
  10. const { TabPane } = Tabs;
  11. const FormItem = Form.Item;
  12. const confirm = Modal.confirm;
  13. class Source extends Component {
  14. constructor(props) {
  15. super(props);
  16. this.state = {
  17. visible: '', // 弹窗控制
  18. level1Data: [], // 体系数据
  19. searchValues: {}, // 列表筛选条件
  20. pagination: {
  21. defaultCurrent: 1,
  22. defaultPageSize: 10,
  23. showQuickJumper: true,
  24. pageSize: 10,
  25. onChange: function (page) {
  26. this.loadData(page);
  27. }.bind(this),
  28. showTotal: function (total) {
  29. return "共" + total + "条数据";
  30. },
  31. },
  32. loading: false,
  33. changeList: undefined,
  34. dataSource: [], // 列表数据
  35. selectedRowKeys: [], // 选中列表数据
  36. selectedRows: [], // 选中列表数据
  37. info: {}, //单条详情数据
  38. columns: [
  39. {
  40. title: "巴名称",
  41. dataIndex: "name",
  42. key: "name",
  43. },
  44. {
  45. title: "巴主",
  46. dataIndex: "leaderName",
  47. key: "leaderName",
  48. },
  49. {
  50. title: "所属战区",
  51. dataIndex: "name5",
  52. key: "name5",
  53. render: (text, record) =>
  54. <span >
  55. {getBarLevel(record.ancestorsNames)[4]}
  56. </span>
  57. },
  58. {
  59. title: "所属事业部",
  60. dataIndex: "name4",
  61. key: "name4",
  62. render: (text, record) =>
  63. <span >
  64. {getBarLevel(record.ancestorsNames)[3]}
  65. </span>
  66. },
  67. {
  68. title: "所属区",
  69. dataIndex: "name3",
  70. key: "name3",
  71. render: (text, record) =>
  72. <span >
  73. {getBarLevel(record.ancestorsNames)[2]}
  74. </span>
  75. },
  76. {
  77. title: "所属大区",
  78. dataIndex: "name2",
  79. key: "name2",
  80. render: (text, record) =>
  81. <span >
  82. {getBarLevel(record.ancestorsNames)[1]}
  83. </span>
  84. },
  85. {
  86. title: "所属体系",
  87. dataIndex: "name1",
  88. key: "name1",
  89. render: (text, record) =>
  90. <span >
  91. {getBarLevel(record.ancestorsNames)[0]}
  92. </span>
  93. },
  94. {
  95. title: "财务",
  96. dataIndex: "financeName",
  97. key: "financeName",
  98. },
  99. {
  100. title: "会计",
  101. dataIndex: "accountantName",
  102. key: "accountantName",
  103. },
  104. {
  105. title: "状态",
  106. dataIndex: "status",
  107. key: "status",
  108. render: (text) =>
  109. <span style={{ color: ["green", "red"][text] }}>
  110. {text == 0
  111. ? "正常" : text == 1
  112. ? "停用" : "-"}
  113. </span>
  114. },
  115. {
  116. title: "创建时间",
  117. dataIndex: "createTimes",
  118. key: "createTimes",
  119. },
  120. ],
  121. };
  122. this.supervisor = this.supervisor.bind(this);
  123. this.httpChange = this.httpChange.bind(this);
  124. this.blurChange = this.blurChange.bind(this);
  125. this.selectAuto = this.selectAuto.bind(this);
  126. this.handleCancel = this.handleCancel.bind(this);
  127. this.handleCancel = this.handleCancel.bind(this);
  128. }
  129. // 根据id获取子集
  130. getSubset(id, list, key = "id", valus = "list") {
  131. let newList = [];
  132. if (!list) {
  133. return newList
  134. }
  135. list.forEach((item) => {
  136. if (item[key] == id) {
  137. newList = item[valus]
  138. }
  139. })
  140. return newList
  141. }
  142. // 筛选数据
  143. getList() {
  144. this.setState({
  145. loading: true,
  146. });
  147. $.ajax({
  148. method: "get",
  149. dataType: "json",
  150. crossDomain: false,
  151. url: globalConfig.context + "/api/admin/amb/selectAll",
  152. success: function (data) {
  153. this.setState({
  154. loading: false,
  155. });
  156. if (data.error && data.error.length === 0) {
  157. let menuList = data.data
  158. this.setState({
  159. level1Data: menuList ? this.handleTreeData(menuList) : []
  160. });
  161. } else {
  162. message.warning(data.error[0].message);
  163. }
  164. }.bind(this),
  165. }).always(
  166. function () {
  167. this.setState({
  168. loading: false,
  169. });
  170. }.bind(this)
  171. );
  172. }
  173. // 树状默认数据处理
  174. handleTreeData(treeData) {
  175. let nodeDta = [];
  176. treeData.map(item => {
  177. let treeObj = {};
  178. treeObj.id = item.id
  179. treeObj.label = item.name
  180. treeObj.value = item.id
  181. treeObj.key = item.id
  182. treeObj.lvl = item.lvl
  183. treeObj.parentId = item.parentId
  184. item.list ? treeObj.children = this.handleTreeData(item.list) : null;
  185. nodeDta.push(treeObj)
  186. })
  187. return nodeDta
  188. }
  189. // 更改表格显示数据
  190. changeList(arr) {
  191. const newArr = [];
  192. this.state.columns.forEach((item) => {
  193. arr.forEach((val) => {
  194. if (val === item.title) {
  195. newArr.push(item);
  196. }
  197. });
  198. });
  199. this.setState({
  200. changeList: newArr,
  201. });
  202. }
  203. // 重置
  204. resetAll() {
  205. this.setState(
  206. {
  207. auto: "",
  208. searchValues: JSON.parse(JSON.stringify({})),
  209. selectedRowKeys: [],
  210. selectedRows: [],
  211. },
  212. () => {
  213. this.loadData();
  214. }
  215. );
  216. }
  217. // 搜索
  218. submit() {
  219. this.setState({
  220. params: this.state.searchValues
  221. })
  222. this.loadData()
  223. }
  224. // 列表接口
  225. loadData(pageNo) {
  226. const { searchValues, pagination } = this.state;
  227. this.setState({
  228. loading: true,
  229. });
  230. let datas = Object.assign(searchValues, {
  231. pageNo: pageNo || 1,
  232. pageSize: pagination.pageSize,
  233. lvl: 6,
  234. });
  235. $.ajax({
  236. method: "get",
  237. dataType: "json",
  238. crossDomain: false,
  239. url: globalConfig.context + "/api/admin/amb/select",
  240. data: datas,
  241. success: function (data) {
  242. ShowModal(this);
  243. this.setState({
  244. loading: false,
  245. });
  246. if (data.error && data.error.length === 0) {
  247. if (data.data.list) {
  248. pagination.current = data.data.pageNo;
  249. pagination.total = data.data.totalCount;
  250. if (data.data && data.data.list && !data.data.list.length) {
  251. pagination.current = 0;
  252. pagination.total = 0;
  253. }
  254. this.setState({
  255. dataSource: data.data.list,
  256. pagination: this.state.pagination,
  257. pageNo: data.data.pageNo,
  258. });
  259. } else {
  260. this.setState({
  261. dataSource: data.data,
  262. pagination: false,
  263. });
  264. }
  265. } else {
  266. message.warning(data.error[0].message);
  267. }
  268. }.bind(this),
  269. }).always(
  270. function () {
  271. this.setState({
  272. loading: false,
  273. });
  274. }.bind(this)
  275. );
  276. }
  277. // 查询用户
  278. supervisor(e) {
  279. $.ajax({
  280. method: "get",
  281. dataType: "json",
  282. crossDomain: false,
  283. url: globalConfig.context + "/api/admin/customer/listAdminByName",
  284. data: {
  285. adminName: e,
  286. },
  287. success: function (data) {
  288. let thedata = data.data;
  289. if (!thedata) {
  290. if (data.error && data.error.length) {
  291. message.warning(data.error[0].message);
  292. }
  293. thedata = {};
  294. }
  295. this.setState({
  296. customerArr: thedata,
  297. });
  298. }.bind(this),
  299. }).always(
  300. function () {
  301. }.bind(this)
  302. );
  303. }
  304. // 输入触发
  305. httpChange(e) {
  306. if (e.length >= 1) {
  307. this.supervisor(e);
  308. }
  309. this.setState({
  310. auto: e,
  311. });
  312. }
  313. // 选中
  314. selectAuto(value, options) {
  315. const { searchValues } = this.state
  316. let contactLists = this.state.customerArr || [];
  317. if (value) {
  318. contactLists.map(function (item) {
  319. if (item.name == value.toString()) {
  320. searchValues["leader"] = item.id;
  321. }
  322. });
  323. }
  324. this.setState({
  325. auto: value,
  326. searchValues: searchValues,
  327. });
  328. }
  329. // 失去焦点
  330. blurChange(e) {
  331. const { searchValues } = this.state
  332. let contactLists = this.state.customerArr || [];
  333. if (e) {
  334. contactLists.map(function (item) {
  335. if (item.name == e.toString()) {
  336. searchValues["leader"] = item.id;
  337. }
  338. });
  339. }
  340. this.setState({
  341. searchValues: searchValues,
  342. });
  343. }
  344. // 选择行
  345. onSelectChange(selectedRowKeys, selectedRows) {
  346. this.setState({ selectedRowKeys, selectedRows });
  347. }
  348. // 删除巴
  349. delete() {
  350. const { selectedRows } = this.state
  351. this.setState({
  352. loading: true,
  353. })
  354. $.ajax({
  355. method: "post",
  356. dataType: "json",
  357. crossDomain: false,
  358. url: globalConfig.context + "/api/admin/amb/delete",
  359. data: {
  360. id: selectedRows[0].id
  361. },
  362. success: function (data) {
  363. if (data.error.length) {
  364. if (data.error && data.error.length) {
  365. message.warning(data.error[0].message)
  366. }
  367. } else {
  368. message.success('删除成功');
  369. this.getList();
  370. this.loadData();
  371. this.setState({
  372. selectedRowKeys: [],
  373. selectedRows: [],
  374. });
  375. }
  376. }.bind(this),
  377. }).always(
  378. function () {
  379. this.setState({
  380. loading: false,
  381. })
  382. }.bind(this)
  383. );
  384. }
  385. // 关闭弹窗
  386. handleCancel() {
  387. this.setState({
  388. visible: "",
  389. info: {},
  390. }, () => {
  391. this.getList();
  392. this.loadData();
  393. })
  394. }
  395. componentWillMount() {
  396. this.getList();
  397. this.loadData();
  398. }
  399. render() {
  400. const { searchValues, columns, selectedRowKeys, selectedRows, changeList, level1Data } = this.state;
  401. const rowSelection = {
  402. selectedRowKeys,
  403. onChange: this.onSelectChange.bind(this),
  404. hideDefaultSelections: true,
  405. type: "radio",
  406. };
  407. const dataSources = this.state.customerArr || [];
  408. const options = dataSources.map((group) => (
  409. <Select.Option key={group.id} value={group.name}>
  410. {group.name}
  411. </Select.Option>
  412. ));
  413. return (
  414. <div className="user-content">
  415. <ShowModalDiv ShowModal={this.state.showModal} />
  416. <div className="content-title" style={{ marginBottom: 10 }}>
  417. <span style={{ fontWeight: 900, fontSize: 16, }}>巴列表数据</span>
  418. </div>
  419. <Tabs defaultActiveKey="1" onChange={() => { }}>
  420. <TabPane tab="搜索" key="1">
  421. <div style={{ padding: "0 10px" }}>
  422. <Form layout="inline">
  423. <FormItem>
  424. <Input
  425. placeholder="输入巴名称"
  426. value={searchValues["name"]
  427. ? searchValues["name"]
  428. : ""}
  429. onChange={(e) => {
  430. searchValues["name"] = e.target.value;
  431. this.setState({
  432. searchValues: searchValues,
  433. });
  434. }}
  435. />
  436. </FormItem>
  437. <FormItem>
  438. <AutoComplete
  439. className="certain-category-search"
  440. dropdownClassName="certain-category-search-dropdown"
  441. dropdownMatchSelectWidth={false}
  442. style={{ width: "120px" }}
  443. dataSource={options}
  444. placeholder='输入巴主名称'
  445. value={this.state.auto}
  446. onChange={this.httpChange}
  447. filterOption={true}
  448. onBlur={this.blurChange}
  449. onSelect={this.selectAuto}
  450. >
  451. <Input />
  452. </AutoComplete>
  453. </FormItem>
  454. <FormItem>
  455. <TreeSelect
  456. style={{ width: 300 }}
  457. value={searchValues["ancestors"]
  458. ? searchValues["ancestors"]
  459. : undefined}
  460. dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  461. treeData={level1Data}
  462. placeholder="请选择"
  463. onChange={(e) => {
  464. searchValues["ancestors"] = e;
  465. this.setState({
  466. searchValues: searchValues,
  467. });
  468. }}
  469. />
  470. </FormItem>
  471. <Button
  472. type="primary"
  473. onClick={() => { this.submit() }}
  474. style={{ marginRight: "10px" }}
  475. >
  476. 搜索
  477. </Button>
  478. <Button
  479. onClick={() => { this.resetAll() }}
  480. style={{ marginRight: "10px" }}
  481. >
  482. 重置
  483. </Button>
  484. </Form>
  485. </div>
  486. </TabPane>
  487. <TabPane tab="操作" key="2">
  488. <div style={{ marginLeft: 10 }}>
  489. <Button
  490. type="primary"
  491. onClick={() => { this.setState({ visible: "add" }) }}
  492. style={{ margin: "0 10px 10px 0" }}
  493. >
  494. 新增阿米巴架构
  495. </Button>
  496. <Button
  497. type="primary"
  498. disabled={selectedRowKeys.length == 0}
  499. style={{ marginRight: "10px" }}
  500. onClick={() => {
  501. this.setState({
  502. visible: "edit",
  503. info: selectedRows[0]
  504. })
  505. }}
  506. >
  507. 编辑
  508. </Button>
  509. <Button
  510. type="danger"
  511. disabled={selectedRowKeys.length == 0}
  512. style={{ marginRight: "10px" }}
  513. onClick={() => {
  514. let _this = this
  515. confirm({
  516. title: '提醒',
  517. content: '确定要删除吗?',
  518. onOk() {
  519. _this.delete()
  520. }
  521. })
  522. }}
  523. >
  524. 删除
  525. </Button>
  526. </div>
  527. </TabPane>
  528. <TabPane tab="更改表格显示数据" key="3">
  529. <div style={{ marginLeft: 10 }}>
  530. <ChooseList
  531. columns={columns}
  532. changeFn={this.changeList.bind(this)}
  533. changeList={changeList}
  534. top={55}
  535. />
  536. </div>
  537. </TabPane>
  538. </Tabs>
  539. <div className="patent-table">
  540. <Spin spinning={this.state.loading}>
  541. <Table
  542. bordered
  543. size="middle"
  544. columns={changeList ? changeList : columns}
  545. dataSource={this.state.dataSource}
  546. pagination={this.state.pagination}
  547. rowSelection={rowSelection}
  548. />
  549. </Spin>
  550. </div>
  551. {
  552. // 新建编辑巴
  553. this.state.visible != "" &&
  554. <Operation
  555. visible={this.state.visible}
  556. handleCancel={this.handleCancel}
  557. levelData={this.state.level1Data}
  558. info={this.state.info}
  559. lev={5}
  560. />
  561. }
  562. </div>
  563. );
  564. }
  565. }
  566. export default Source;