import React from "react"; import $ from "jquery/src/ajax"; import { AutoComplete, Button, Input, Spin, Table, Select, message, Tabs, Tag, Tooltip, Modal } from "antd"; import OrderDesc from "../orderDetail/orderDesc"; import ResolutionDetail from "@/resolutionDetail"; import { ChooseList } from "../../order/orderNew/chooseList" import ReactToPrint from "react-to-print"; import OrderItemStatus from "../../../common/orderItemStatus"; import { salesList } from "@/dataDic.js"; import ShowModalDiv from "@/showModal.jsx"; import VipLogs from "../../../common/logPopup/viplogs"; import { splitUrl, getApprovalTag } from "@/tools"; import ImgList from "../../../common/imgList"; import Cascaders from "../../../common/cascaders"; const { TabPane } = Tabs; //财务总监会员项目查看 const ProjectVipAll = React.createClass({ // getInitialState() { return { dvisible: false, pageNo: 1, totalPage: 0, searchValues: { status: "5" },//查询条件 loading: false, changeList: undefined,// 子组件改变的表格title数组 pagination: { defaultCurrent: 1, defaultPageSize: 10, showQuickJumper: true, pageSize: 10, onChange: function (page) { this.setState({ pageNo: page, }); this.loadData(page); }.bind(this), showTotal: function (total) { return "共" + total + "条数据"; }, }, columns: [ { title: "销售类型", dataIndex: "salesType", key: "salesType", render: (text, record) => { return ( <Tooltip title={salesList[text] + ((text == 3 || text == 4 || text == 5) ? (!record.other ? "" : "," + record.other) : "")} > <span> {salesList[text]} </span> </Tooltip> ); }, }, { title: "合同编号", dataIndex: "contractNo", key: "contractNo", width: 160, render: (text, record) => { return ( <Tooltip title={ <Button type="primary" onClick={(e) => { e.stopPropagation(); let input = document.getElementById("copyText"); input.value = text; input.select(); document.execCommand("copy"); message.success("复制成功"); }} > 复制 </Button> } > <div> {text} <div style={{ display: "flex" }}> <OrderItemStatus deleteSign={record.deleteSign} /> {getApprovalTag(record.approval)} </div> </div> </Tooltip> ); }, }, { title: "客户名称", dataIndex: "userName", key: "userName", width: 160, render: text => { return ( <Tooltip title={text}> <div>{text}</div> </Tooltip> ) } }, { title: "订单编号", dataIndex: "orderNo", key: "orderNo", width: 140, render: (text, record) => { return ( <Tooltip title={ <Button type="primary" onClick={(e) => { e.stopPropagation(); let input = document.getElementById("copyText"); input.value = text; input.select(); document.execCommand("copy"); message.success("复制成功"); }} > 复制 </Button> } > <div> {text} <div> {record.totalAmount >= 10 && <Tag color="#ef7207">大客户</Tag>} {record.projectType == 1 && <Tag color="rgb(22, 155, 213)">会员</Tag>} </div> </div> </Tooltip> ); }, }, { title: "订单部门", dataIndex: "depName", key: "depName", }, { title: "订单负责人", dataIndex: "salesmanName", key: "salesmanName", }, { title: "财务负责人", dataIndex: "financeName", key: "financeName", }, { title: "会员项目", dataIndex: "projectName", key: "projectName", render: (text, record) => { return ( <div> {text} {(record.memberType == 1 || record.memberType == 2) && <Tag color="#ff0000">特批项目</Tag>} </div> ) } }, { title: "数量", dataIndex: "commodityQuantity", key: "commodityQuantity", }, { title: "总年限", dataIndex: "yearSum", key: "yearSum", render: (text, record) => { return ( <div>{["", "一年", "二年", "三年", "四年", "五年"][text]}</div> ); } }, { title: "年限", dataIndex: "serviceLife", key: "serviceLife", render: (text, record) => { return ( <div>{!!text && JSON.parse(text).toString()}</div> ); } }, { title: "本次派单", dataIndex: "serviceYear", key: "serviceYear", render: (text, record) => { return ( <div>{!text ? "" : text}</div> ); } }, { title: "项目说明", dataIndex: "taskComment", key: "taskComment", render: (text, record) => { return ( <div style={{ maxWidth: 220 }}>{text}</div> ); } }, { title: "状态", dataIndex: "status", key: "status", render: (text) => { return ( <div> {["", "财务审核", "特批审核", "通过", "驳回"][text]} </div> ); } }, { title: "操作", dataIndex: "pictureUrl", key: "pictureUrl", width: 110, render: (text, recard) => { return ( <div> <Button type="primary" style={{ margin: 5 }} onClick={(e) => { e.stopPropagation(); let arr = text || []; this.setState({ pictureUrlArr: splitUrl(arr, ",", globalConfig.avatarHost + "/upload"), recard, }, () => { this.setState({ imgListVisible: true, }) }) }} > 查看附件 </Button> <VipLogs id={recard.id} /> </div> ); }, }, ], dataSource: [], fjlist: [],// 营销员列表 checkOrderNo: "",//操作订单编号 checkData: "",//操作描述 checkVisible: "",//审核弹窗开关 checkId: "",//会员项目编号 result: -1,//1同意 0驳回 imgListVisible: false,//附件弹窗 pictureUrlArr: [],//附件 }; }, componentWillMount() { this.loadData(); // this.departmentList(); }, // 获取订单部门 departmentList() { $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/organization/selectSuperId", data: {}, success: function (data) { let thedata = data.data; let theArr = []; if (!thedata) { if (data.error && data.error.length) { message.warning(data.error[0].message); } } else { thedata.map(function (item, index) { theArr.push({ key: index, name: item.name, id: item.id, }); }); } this.setState({ departmentArr: theArr, }); }.bind(this), }).always( function () { }.bind(this) ); }, // 列表数据 loadData(pageNo, pageSize) { const { searchValues, pagination } = this.state this.setState({ loading: true, }); let datas = Object.assign(searchValues, { pageNo: pageNo || 1, pageSize: pageSize || 10, shiroType: 0, //所有 }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/orderProject/memberList", data: datas, success: function (data) { this.setState({ loading: false, }); if (data.error && data.error.length === 0) { if (data.data.list) { pagination.current = data.data.pageNo; pagination.total = data.data.totalCount; if (data.data && data.data.list && !data.data.list.length) { pagination.current = 0; pagination.total = 0; } this.setState({ dataSource: data.data.list, pagination: this.state.pagination, pageNo: data.data.pageNo, totalPage: data.data.totalPage, }); } else { this.setState({ dataSource: data.data, pagination: false, }); } } else { message.warning(data.error[0].message); } }.bind(this), }).always( function () { this.setState({ loading: false, }); }.bind(this) ); }, // 点击行 tableRowClick(record) { this.state.RowData = record; this.setState({ showDesc: true, }); }, // 关闭 closeDesc(e, s) { this.state.showDesc = e; if (s) { this.loadData(this.state.pageNo); } }, // 搜索 search() { this.setState({ selectedRowKeys: [] }) this.loadData(); }, // 重置 reset() { this.setState({ searchValues: JSON.parse(JSON.stringify({})), }, () => { this.Cascaders.empty(); this.loadData(); }) }, // 更改表格显示数据 changeList(arr) { const newArr = []; this.state.columns.forEach((item) => { arr.forEach((val) => { if (val === item.title) { newArr.push(item); } }); }); this.setState({ changeList: newArr, }); }, // 导出当前列表 exportAll() { message.config({ duration: 20, }); let loading = message.loading("下载中..."); this.setState({ exportPendingLoading: true, }); let data = { shiroType: 0, //所有 }; let obj1 = JSON.parse(JSON.stringify(this.state.searchValues)); data = Object.assign(data, obj1); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: "/api/admin/orderProject/memberList/export", data, success: function (data) { if (data.error.length === 0) { this.download(data.data); } else { message.warning(data.error[0].message); } }.bind(this), }).always( function () { loading(); this.setState({ exportPendingLoading: false, }); }.bind(this) ); }, // 打印 printAll() { this.setState({ dvisible: true, }); this.loadData(1, 9999999); }, // 下载 download(fileName) { window.location.href = globalConfig.context + "/open/download?fileName=" + fileName; }, // 查询订单负责人列表 followUp(e) { const { searchValues } = this.state; this.setState({ searchValues: Object.assign(searchValues, { aname: e, }), }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/customer/listAdminByName", data: { adminName: e, }, success: function (data) { let thedata = data.data; if (!thedata) { if (data.error && data.error.length) { message.warning(data.error[0].message); } thedata = {}; } this.setState({ fjlist: thedata, }); }.bind(this), }).always( function () { this.setState({ loading: false, }); }.bind(this) ); }, // 选中订单负责人 selectF(value) { const { searchValues, fjlist } = this.state; const newdataSources = JSON.stringify(fjlist) == "{}" ? [] : fjlist; this.setState({ searchValues: Object.assign(searchValues, { salesmanId: newdataSources.find((item) => item.name == value).id, }), }); }, // 失去焦点 blurChange(e) { let theType = ""; let contactLists = this.state.customerArr || []; if (e) { contactLists.map(function (item) { if (item.name == e.toString()) { theType = item.id; } }); } this.setState({ theTypes: theType, }); }, // 删除数组最后一项(删除操作列) truncate(arr) { return arr.filter(function (v, i, ar) { return i !== ar.length - 1 }) }, render() { const { TextArea } = Input const { searchValues, departmentArr = [] } = this.state const dataSources = this.state.fjlist || []; const options = dataSources.map((group) => ( <Select.Option key={group.id} value={group.name}> {group.name} </Select.Option> )); return ( <div className="user-content"> <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} /> <div className="content-title" style={{ marginBottom: 10 }}> <span style={{ fontWeight: 900, fontSize: 16 }}>会员项目(All)</span> </div> <Tabs defaultActiveKey="2" onChange={this.callback} className="test"> <TabPane tab="更改表格显示数据" key="1"> <div style={{ marginLeft: 10 }}> <ChooseList columns={this.state.columns} changeFn={this.changeList} changeList={this.state.changeList} top={55} margin={11} /> </div> </TabPane> <TabPane tab="搜索" key="2"> <div className="user-search" style={{ marginLeft: 10 }}> <Input placeholder="订单编号" value={searchValues["orderNo"] ? searchValues["orderNo"] : ""} onChange={(e) => { searchValues["orderNo"] = e.target.value; this.setState({ searchValues: searchValues, }); }} /> <Input placeholder="合同编号" value={searchValues["contractNo"] ? searchValues["contractNo"] : ""} onChange={(e) => { searchValues["contractNo"] = e.target.value; this.setState({ searchValues: searchValues, }); }} /> <Input placeholder="客户名称" value={searchValues["userName"] ? searchValues["userName"] : ""} onChange={(e) => { searchValues["userName"] = e.target.value; this.setState({ searchValues: searchValues, }); }} /> <Cascaders ref={node => this.Cascaders = node} placeholder="订单部门" id="id" name="name" children="list" height={28} onSel={(e) => { searchValues["deps"] = JSON.stringify(e); this.setState({ searchValues: searchValues, }); }} /> {/* <Select placeholder="订单部门" style={{ width: 190, marginRight: 10 }} value={searchValues["depId"] ? searchValues["depId"] : undefined} onChange={(e) => { searchValues["depId"] = e; this.setState({ searchValues: searchValues, }); }} > {departmentArr.map(function (item) { return ( <Select.Option key={item.id}>{item.name}</Select.Option> ); })} </Select> */} <AutoComplete className="certain-category-search" dropdownClassName="certain-category-search-dropdown" dropdownMatchSelectWidth={false} style={{ width: "120px" }} dataSource={options} placeholder="订单负责人" value={searchValues.aname || undefined} onChange={this.followUp.bind(this)} filterOption={true} onSelect={this.selectF.bind(this)} > <Input /> </AutoComplete> <Input placeholder="项目名称" value={searchValues["projectName"] ? searchValues["projectName"] : ""} onChange={(e) => { searchValues["projectName"] = e.target.value; this.setState({ searchValues: searchValues, }); }} /> <Select style={{ width: 120 }} placeholder="签单金额" value={searchValues["amountStatus"] ? searchValues["amountStatus"] : undefined} onChange={(e) => { searchValues["amountStatus"] = e; this.setState({ searchValues: searchValues, }); }} > <Option value="0">10万元以下</Option> <Option value="1">10~20万元</Option> <Option value="2">20~30万元</Option> <Option value="3">30~40万元</Option> <Option value="4">40万元以上</Option> </Select> <Select style={{ width: 120 }} placeholder="特批状态" value={searchValues["approval"] ? searchValues["approval"] : undefined} onChange={(e) => { searchValues["approval"] = e; this.setState({ searchValues: searchValues, }); }} > <Option value="0">非特批</Option> <Option value="1">特批待审</Option> <Option value="2">特批通过</Option> <Option value="4">全部特批</Option> </Select> <Select style={{ width: 120 }} placeholder="审核状态" value={searchValues["status"] ? searchValues["status"] : undefined} onChange={(e) => { searchValues["status"] = e; this.setState({ searchValues: searchValues, }); }} > <Option value="1">财务审核</Option> <Option value="2">特批审核</Option> <Option value="3">通过</Option> <Option value="5">全部</Option> </Select> <Button type="primary" onClick={this.search} style={{ marginLeft: 10 }} disabled={this.state.loading ? true : false} > 搜索 </Button> <Button onClick={this.reset}>重置</Button> </div> </TabPane> <TabPane tab="打印" key="3"> <Button type="primary" style={{ margin: "11px 0px 10px 10px" }} onClick={this.printAll} > 打印当前列表 </Button> </TabPane> <TabPane tab="导出Excel" key="4"> <Button type="primary" style={{ margin: "11px 0px 10px 10px" }} onClick={this.exportAll} > 导出当前列表 </Button> </TabPane> </Tabs> <div className="patent-table"> <Spin spinning={this.state.loading}> <Table bordered columns={ this.state.changeList == undefined ? this.state.columns : this.state.changeList } dataSource={this.state.dataSource} pagination={this.state.pagination} onRowDoubleClick={this.tableRowClick.bind(this)} size="small" /> </Spin> </div> <textarea id="copyText" style={{ opacity: 0 }} /> {/* 订单详情 */} <OrderDesc data={this.state.RowData} showDesc={this.state.showDesc} closeDesc={this.closeDesc.bind(this)} /> { //打印预览 this.state.dvisible && <Modal visible={this.state.dvisible} footer="" title="所有列表信息" className="admin-desc-content" width="1300px" onCancel={() => { this.loadData(); this.setState({ dvisible: false, }); }} > <Spin spinning={this.state.loading}> <div className="patent-table" style={{ padding: "25px 0 30px 30px", }} ref={(e) => { this.refs.all = e; }} > <Table columns={this.truncate(this.state.columns)} dataSource={this.state.dataSource} pagination={false} bordered size="small" /> </div> </Spin> <ReactToPrint trigger={() => ( <Button type="primary" style={{ float: "right", marginTop: 10, position: "absolute", top: 0, right: 30, }} > 打印 </Button> )} content={() => this.refs.all} /> </Modal> } { //查看附件 this.state.imgListVisible && <Modal maskClosable={false} visible={this.state.imgListVisible} onOk={() => { this.setState({ imgListVisible: false, }); }} onCancel={() => { this.setState({ imgListVisible: false, }); }} width="600px" title="附件" footer="" > <div style={{ marginBottom: 20 }}> 付款情况: {this.state.recard.memberType == "0" ? "已付会员节点全款" : this.state.recard.memberType == "1" ? "已付部分期款,需特批" : this.state.recard.memberType == "2" ? "未付款,需特批" : ""} </div> <div>附件:</div> <div> <ImgList fileList={this.state.pictureUrlArr} domId="publicStatistics" /> </div> </Modal> } </div> ); }, }); export default ProjectVipAll;