projectvip.jsx 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839
  1. import React from "react";
  2. import $ from "jquery/src/ajax";
  3. import "./public.less";
  4. import "./shouKuan.less";
  5. import { AutoComplete, Button, Input, Spin, Table, Select, message, Tabs, Tag, Tooltip, Modal } from "antd";
  6. import OrderDesc from "../orderDetail/orderDesc";
  7. import ResolutionDetail from "@/resolutionDetail";
  8. import { ChooseList } from "../../order/orderNew/chooseList"
  9. import ReactToPrint from "react-to-print";
  10. import OrderItemStatus from "../../../common/orderItemStatus";
  11. const { TabPane } = Tabs;
  12. //财务专员会员项目审核
  13. const ProjectVip = React.createClass({
  14. //
  15. getInitialState() {
  16. return {
  17. dvisible: false,
  18. pageNo: 1,
  19. totalPage: 0,
  20. searchValues: {
  21. status: "1"
  22. },//查询条件
  23. loading: false,
  24. changeList: undefined,// 子组件改变的表格title数组
  25. pagination: {
  26. defaultCurrent: 1,
  27. defaultPageSize: 10,
  28. showQuickJumper: true,
  29. pageSize: 10,
  30. onChange: function (page) {
  31. this.setState({
  32. pageNo: page,
  33. });
  34. this.loadData(page);
  35. }.bind(this),
  36. showTotal: function (total) {
  37. return "共" + total + "条数据";
  38. },
  39. },
  40. columns: [
  41. // {
  42. // title: "销售类型",
  43. // dataIndex: "salesType",
  44. // key: "salesType",
  45. // render: (text, record) => {
  46. // return (
  47. // <Tooltip
  48. // title={salesList[text] + ((text == 3 || text == 4 || text == 5) ? (!record.other ? "" : "," + record.other) : "")}
  49. // >
  50. // <span>
  51. // {salesList[text]}
  52. // </span>
  53. // </Tooltip>
  54. // );
  55. // },
  56. // },
  57. {
  58. title: "合同编号",
  59. dataIndex: "contractNo",
  60. key: "contractNo",
  61. width: 160,
  62. render: (text, record) => {
  63. return (
  64. <Tooltip
  65. title={
  66. <Button
  67. type="primary"
  68. onClick={(e) => {
  69. e.stopPropagation();
  70. let input = document.getElementById("copyText");
  71. input.value = text;
  72. input.select();
  73. document.execCommand("copy");
  74. message.success("复制成功");
  75. }}
  76. >
  77. 复制
  78. </Button>
  79. }
  80. >
  81. <div>
  82. {text}
  83. <div style={{ display: "flex" }}>
  84. {/* <OrderItemStatus deleteSign={record.deleteSign} /> */}
  85. {
  86. record.approval == 1
  87. ? <Tag color="#faa755">特批待审</Tag> :
  88. record.approval == 2 && <Tag color="#ff0000">特批通过</Tag>
  89. }
  90. </div>
  91. </div>
  92. </Tooltip>
  93. );
  94. },
  95. },
  96. {
  97. title: "客户名称",
  98. dataIndex: "userName",
  99. key: "userName",
  100. width: 200,
  101. render: text => {
  102. return (
  103. <Tooltip title={text}>
  104. <div>{text}</div>
  105. </Tooltip>
  106. )
  107. }
  108. },
  109. {
  110. title: "订单编号",
  111. dataIndex: "orderNo",
  112. key: "orderNo",
  113. width: 140,
  114. render: (text, record) => {
  115. return (
  116. <Tooltip
  117. title={
  118. <Button
  119. type="primary"
  120. onClick={(e) => {
  121. e.stopPropagation();
  122. let input = document.getElementById("copyText");
  123. input.value = text;
  124. input.select();
  125. document.execCommand("copy");
  126. message.success("复制成功");
  127. }}
  128. >
  129. 复制
  130. </Button>
  131. }
  132. >
  133. <div>
  134. {text}
  135. <div>
  136. {record.signTotalAmount >= 10 && <Tag color="#ef7207">大客户</Tag>}
  137. {record.projectType == 1 && <Tag color="rgb(22, 155, 213)">会员</Tag>}
  138. </div>
  139. </div>
  140. </Tooltip>
  141. );
  142. },
  143. },
  144. {
  145. title: "订单部门",
  146. dataIndex: "depName",
  147. key: "depName",
  148. className: "title-table",
  149. },
  150. {
  151. title: "订单负责人",
  152. dataIndex: "salesmanName",
  153. key: "salesmanName",
  154. className: "title-table",
  155. },
  156. {
  157. title: "财务负责人",
  158. dataIndex: "financeName",
  159. key: "financeName",
  160. className: "title-table",
  161. },
  162. {
  163. title: "会员项目",
  164. dataIndex: "projectName",
  165. key: "projectName",
  166. className: "title-table",
  167. },
  168. {
  169. title: "项目说明",
  170. dataIndex: "projectComment",
  171. key: "projectComment",
  172. className: "title-table",
  173. width: 200,
  174. },
  175. {
  176. title: "状态",
  177. dataIndex: "status",
  178. key: "status",
  179. className: "title-table",
  180. render: (text) => {
  181. return (
  182. <div>
  183. {["", "财务审核", "特批审核", "通过", "驳回"][text]}
  184. </div>
  185. );
  186. }
  187. },
  188. {
  189. title: "操作",
  190. dataIndex: "caozuo",
  191. key: "caouzo",
  192. className: "title-table",
  193. width: 150,
  194. render: (text, recard) => {
  195. return (
  196. <div>
  197. {
  198. recard.status == 1 &&
  199. <Button
  200. type="primary"
  201. onClick={(e) => {
  202. e.stopPropagation(),
  203. this.checkRemark(recard, 1);
  204. }}
  205. >
  206. 通过
  207. </Button>
  208. }
  209. {
  210. recard.status == 1 &&
  211. <Button
  212. type="danger"
  213. style={{ marginLeft: "5px", }}
  214. onClick={(e) => {
  215. e.stopPropagation(),
  216. this.checkRemark(recard, 0);
  217. }}
  218. >
  219. 驳回
  220. </Button>
  221. }
  222. </div>
  223. );
  224. },
  225. },
  226. ],
  227. dataSource: [],
  228. fjlist: [],// 营销员列表
  229. checkOrderNo: "",//操作订单编号
  230. checkData: "",//操作描述
  231. checkVisible: "",//审核弹窗开关
  232. checkId: "",//会员项目编号
  233. result: -1,//1同意 0驳回
  234. };
  235. },
  236. componentWillMount() {
  237. this.loadData();
  238. this.departmentList();
  239. },
  240. // 获取订单部门
  241. departmentList() {
  242. $.ajax({
  243. method: "get",
  244. dataType: "json",
  245. crossDomain: false,
  246. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  247. data: {},
  248. success: function (data) {
  249. let thedata = data.data;
  250. let theArr = [];
  251. if (!thedata) {
  252. if (data.error && data.error.length) {
  253. message.warning(data.error[0].message);
  254. }
  255. } else {
  256. thedata.map(function (item, index) {
  257. theArr.push({
  258. key: index,
  259. name: item.name,
  260. id: item.id,
  261. });
  262. });
  263. }
  264. this.setState({
  265. departmentArr: theArr,
  266. });
  267. }.bind(this),
  268. }).always(
  269. function () {
  270. }.bind(this)
  271. );
  272. },
  273. // 列表数据
  274. loadData(pageNo, pageSize) {
  275. const { searchValues, pagination } = this.state
  276. this.setState({
  277. loading: true,
  278. });
  279. let datas = Object.assign(searchValues, {
  280. pageNo: pageNo || 1,
  281. pageSize: pageSize || 10,
  282. shiroType: 2, //财务审核
  283. });
  284. $.ajax({
  285. method: "get",
  286. dataType: "json",
  287. crossDomain: false,
  288. url: globalConfig.context + "/api/admin/orderProject/memberList",
  289. data: datas,
  290. success: function (data) {
  291. this.setState({
  292. loading: false,
  293. });
  294. if (data.error && data.error.length === 0) {
  295. if (data.data.list) {
  296. pagination.current = data.data.pageNo;
  297. pagination.total = data.data.totalCount;
  298. if (data.data && data.data.list && !data.data.list.length) {
  299. pagination.current = 0;
  300. pagination.total = 0;
  301. }
  302. this.setState({
  303. dataSource: data.data.list,
  304. pagination: this.state.pagination,
  305. pageNo: data.data.pageNo,
  306. totalPage: data.data.totalPage,
  307. });
  308. } else {
  309. this.setState({
  310. dataSource: data.data,
  311. pagination: false,
  312. });
  313. }
  314. } else {
  315. message.warning(data.error[0].message);
  316. }
  317. }.bind(this),
  318. }).always(
  319. function () {
  320. this.setState({
  321. loading: false,
  322. });
  323. }.bind(this)
  324. );
  325. },
  326. // 点击行
  327. tableRowClick(record) {
  328. this.state.RowData = record;
  329. this.setState({
  330. showDesc: true,
  331. });
  332. },
  333. // 关闭
  334. closeDesc(e, s) {
  335. this.state.showDesc = e;
  336. if (s) {
  337. this.loadData(this.state.page);
  338. }
  339. },
  340. // 搜索
  341. search() {
  342. this.setState({
  343. selectedRowKeys: []
  344. })
  345. this.loadData();
  346. },
  347. // 重置
  348. reset() {
  349. this.setState({
  350. searchValues: JSON.parse(JSON.stringify({})),
  351. }, () => {
  352. this.loadData();
  353. })
  354. },
  355. // 点击审核
  356. checkRemark(record, nmb) {
  357. this.setState({
  358. checkVisible: true,
  359. checkId: record.id,
  360. result: nmb
  361. });
  362. },
  363. // 审核
  364. toExamine() {
  365. if (!this.state.checkData) {
  366. message.warning("请填写审核说明~");
  367. return;
  368. }
  369. this.setState({
  370. loading: true,
  371. });
  372. $.ajax({
  373. method: "POST",
  374. dataType: "json",
  375. crossDomain: false,
  376. url: globalConfig.context + "/api/admin/orderProject/examineMemberProject",
  377. data: {
  378. id: this.state.checkId,
  379. remarks: this.state.content,
  380. result: this.state.result, //1同意 0驳回
  381. type: 0, //0财务审核 1特批审核
  382. },
  383. }).done(
  384. function (data) {
  385. if (!data.error.length) {
  386. message.success("审核成功!");
  387. this.setState({
  388. loading: false,
  389. checkVisible: false,
  390. checkData: '',
  391. });
  392. this.loadData()
  393. } else {
  394. message.warning(data.error[0].message);
  395. }
  396. }.bind(this)
  397. );
  398. },
  399. // 更改表格显示数据
  400. changeList(arr) {
  401. const newArr = [];
  402. this.state.columns.forEach((item) => {
  403. arr.forEach((val) => {
  404. if (val === item.title) {
  405. newArr.push(item);
  406. }
  407. });
  408. });
  409. this.setState({
  410. changeList: newArr,
  411. });
  412. },
  413. // 导出当前列表
  414. exportAll() {
  415. message.config({
  416. duration: 20,
  417. });
  418. let loading = message.loading("下载中...");
  419. this.setState({
  420. exportPendingLoading: true,
  421. });
  422. let data = {
  423. shiroType: 2, //财务审核
  424. };
  425. let obj1 = JSON.parse(JSON.stringify(this.state.searchValues));
  426. data = Object.assign(data, obj1);
  427. $.ajax({
  428. method: "get",
  429. dataType: "json",
  430. crossDomain: false,
  431. url: "/api/admin/orderProject/memberList/export",
  432. data,
  433. success: function (data) {
  434. if (data.error.length === 0) {
  435. this.download(data.data);
  436. } else {
  437. message.warning(data.error[0].message);
  438. }
  439. }.bind(this),
  440. }).always(
  441. function () {
  442. loading();
  443. this.setState({
  444. exportPendingLoading: false,
  445. });
  446. }.bind(this)
  447. );
  448. },
  449. // 打印
  450. printAll() {
  451. this.setState({
  452. dvisible: true,
  453. });
  454. this.loadData(1, 9999999);
  455. },
  456. // 下载
  457. download(fileName) {
  458. window.location.href =
  459. globalConfig.context + "/open/download?fileName=" + fileName;
  460. },
  461. // 查询订单负责人列表
  462. followUp(e) {
  463. const { searchValues } = this.state;
  464. this.setState({
  465. searchValues: Object.assign(searchValues, {
  466. aname: e,
  467. }),
  468. });
  469. $.ajax({
  470. method: "get",
  471. dataType: "json",
  472. crossDomain: false,
  473. url: globalConfig.context + "/api/admin/customer/listAdminByName",
  474. data: {
  475. adminName: e,
  476. },
  477. success: function (data) {
  478. let thedata = data.data;
  479. if (!thedata) {
  480. if (data.error && data.error.length) {
  481. message.warning(data.error[0].message);
  482. }
  483. thedata = {};
  484. }
  485. this.setState({
  486. fjlist: thedata,
  487. });
  488. }.bind(this),
  489. }).always(
  490. function () {
  491. this.setState({
  492. loading: false,
  493. });
  494. }.bind(this)
  495. );
  496. },
  497. // 选中订单负责人
  498. selectF(value) {
  499. const { searchValues, fjlist } = this.state;
  500. const newdataSources = JSON.stringify(fjlist) == "{}" ? [] : fjlist;
  501. this.setState({
  502. searchValues: Object.assign(searchValues, {
  503. salesmanId: newdataSources.find((item) => item.name == value).id,
  504. }),
  505. });
  506. },
  507. // 失去焦点
  508. blurChange(e) {
  509. let theType = "";
  510. let contactLists = this.state.customerArr || [];
  511. if (e) {
  512. contactLists.map(function (item) {
  513. if (item.name == e.toString()) {
  514. theType = item.id;
  515. }
  516. });
  517. }
  518. this.setState({
  519. theTypes: theType,
  520. });
  521. },
  522. // 删除数组最后一项(删除操作列)
  523. truncate(arr) {
  524. return arr.filter(function (v, i, ar) {
  525. return i !== ar.length - 1
  526. })
  527. },
  528. render() {
  529. const { TextArea } = Input
  530. const { searchValues, departmentArr = [] } = this.state
  531. const dataSources = this.state.fjlist || [];
  532. const options = dataSources.map((group) => (
  533. <Select.Option key={group.id} value={group.name}>
  534. {group.name}
  535. </Select.Option>
  536. ));
  537. return (
  538. <div className="user-content">
  539. <div className="content-title" style={{ marginBottom: 10 }}>
  540. <span style={{ fontWeight: 900, fontSize: 16 }}>会员项目审核</span>
  541. </div>
  542. <Tabs defaultActiveKey="2" onChange={this.callback} className="test">
  543. <TabPane tab="更改表格显示数据" key="1">
  544. <div style={{ marginLeft: 10 }}>
  545. <ChooseList
  546. columns={this.state.columns}
  547. changeFn={this.changeList}
  548. changeList={this.state.changeList}
  549. top={55}
  550. margin={11}
  551. />
  552. </div>
  553. </TabPane>
  554. <TabPane tab="搜索" key="2">
  555. <div className="user-search" style={{ marginLeft: 10 }}>
  556. <Input
  557. placeholder="订单编号"
  558. value={searchValues["orderNo"]
  559. ? searchValues["orderNo"]
  560. : ""}
  561. onChange={(e) => {
  562. searchValues["orderNo"] = e.target.value;
  563. this.setState({
  564. searchValues: searchValues,
  565. });
  566. }}
  567. />
  568. <Input
  569. placeholder="客户名称"
  570. value={searchValues["userName"]
  571. ? searchValues["userName"]
  572. : ""}
  573. onChange={(e) => {
  574. searchValues["userName"] = e.target.value;
  575. this.setState({
  576. searchValues: searchValues,
  577. });
  578. }}
  579. />
  580. <Select
  581. placeholder="订单部门"
  582. style={{ width: 190, marginRight: 10 }}
  583. value={searchValues["depId"]
  584. ? searchValues["depId"]
  585. : undefined}
  586. onChange={(e) => {
  587. searchValues["depId"] = e;
  588. this.setState({
  589. searchValues: searchValues,
  590. });
  591. }}
  592. >
  593. {departmentArr.map(function (item) {
  594. return (
  595. <Select.Option key={item.id}>{item.name}</Select.Option>
  596. );
  597. })}
  598. </Select>
  599. <Input
  600. placeholder="合同编号"
  601. value={searchValues["contractNo"]
  602. ? searchValues["contractNo"]
  603. : ""}
  604. onChange={(e) => {
  605. searchValues["contractNo"] = e.target.value;
  606. this.setState({
  607. searchValues: searchValues,
  608. });
  609. }}
  610. />
  611. <AutoComplete
  612. className="certain-category-search"
  613. dropdownClassName="certain-category-search-dropdown"
  614. dropdownMatchSelectWidth={false}
  615. style={{ width: "120px" }}
  616. dataSource={options}
  617. placeholder="订单负责人"
  618. value={searchValues.aname || undefined}
  619. onChange={this.followUp.bind(this)}
  620. filterOption={true}
  621. onSelect={this.selectF.bind(this)}
  622. >
  623. <Input />
  624. </AutoComplete>
  625. <Input
  626. placeholder="项目名称"
  627. value={searchValues["projectName"]
  628. ? searchValues["projectName"]
  629. : ""}
  630. onChange={(e) => {
  631. searchValues["projectName"] = e.target.value;
  632. this.setState({
  633. searchValues: searchValues,
  634. });
  635. }}
  636. />
  637. <Select
  638. style={{ width: 120 }}
  639. placeholder="签单金额"
  640. value={searchValues["amountStatus"]
  641. ? searchValues["amountStatus"]
  642. : undefined}
  643. onChange={(e) => {
  644. searchValues["amountStatus"] = e;
  645. this.setState({
  646. searchValues: searchValues,
  647. });
  648. }}
  649. >
  650. <Option value="0">10万元以下</Option>
  651. <Option value="1">10~20万元</Option>
  652. <Option value="2">20~30万元</Option>
  653. <Option value="3">30~40万元</Option>
  654. <Option value="4">40万元以上</Option>
  655. </Select>
  656. <Select
  657. style={{ width: 120 }}
  658. placeholder="特批状态"
  659. value={searchValues["approval"]
  660. ? searchValues["approval"]
  661. : undefined}
  662. onChange={(e) => {
  663. searchValues["approval"] = e;
  664. this.setState({
  665. searchValues: searchValues,
  666. });
  667. }}
  668. >
  669. <Option value="0">非特批</Option>
  670. <Option value="1">特批待审</Option>
  671. <Option value="2">特批通过</Option>
  672. <Option value="4">全部特批</Option>
  673. </Select>
  674. <Select
  675. style={{ width: 120 }}
  676. placeholder="审核状态"
  677. value={searchValues["status"]
  678. ? searchValues["status"]
  679. : undefined}
  680. onChange={(e) => {
  681. searchValues["status"] = e;
  682. this.setState({
  683. searchValues: searchValues,
  684. });
  685. }}
  686. >
  687. <Option value="1">财务审核</Option>
  688. <Option value="2">特批审核</Option>
  689. <Option value="3">通过</Option>
  690. <Option value="5">全部</Option>
  691. </Select>
  692. <Button
  693. type="primary"
  694. onClick={this.search}
  695. style={{ marginLeft: 10 }}
  696. disabled={this.state.loading ? true : false}
  697. >
  698. 搜索
  699. </Button>
  700. <Button onClick={this.reset}>重置</Button>
  701. </div>
  702. </TabPane>
  703. <TabPane tab="打印" key="3">
  704. <Button
  705. type="primary"
  706. style={{ margin: "11px 0px 10px 10px" }}
  707. onClick={this.printAll}
  708. >
  709. 打印当前列表
  710. </Button>
  711. </TabPane>
  712. <TabPane tab="导出Excel" key="4">
  713. <Button
  714. type="primary"
  715. style={{ margin: "11px 0px 10px 10px" }}
  716. onClick={this.exportAll}
  717. >
  718. 导出当前列表
  719. </Button>
  720. </TabPane>
  721. </Tabs>
  722. <div className="patent-table">
  723. <Spin spinning={this.state.loading}>
  724. <Table
  725. bordered
  726. columns={
  727. this.state.changeList == undefined
  728. ? this.state.columns
  729. : this.state.changeList
  730. }
  731. dataSource={this.state.dataSource}
  732. pagination={this.state.pagination}
  733. onRowDoubleClick={this.tableRowClick.bind(this)}
  734. size="small"
  735. />
  736. </Spin>
  737. </div>
  738. {/* 订单详情 */}
  739. <OrderDesc
  740. data={this.state.RowData}
  741. showDesc={this.state.showDesc}
  742. closeDesc={this.closeDesc.bind(this)}
  743. />
  744. {
  745. //打印预览
  746. this.state.dvisible &&
  747. <Modal
  748. visible={this.state.dvisible}
  749. footer=""
  750. title="所有列表信息"
  751. className="admin-desc-content"
  752. width="1300px"
  753. onCancel={() => {
  754. this.loadData();
  755. this.setState({
  756. dvisible: false,
  757. });
  758. }}
  759. >
  760. <Spin spinning={this.state.loading}>
  761. <div
  762. className="patent-table"
  763. style={{
  764. padding: "25px 0 30px 30px",
  765. }}
  766. ref={(e) => {
  767. this.refs.all = e;
  768. }}
  769. >
  770. <Table
  771. columns={this.truncate(this.state.columns)}
  772. dataSource={this.state.dataSource}
  773. pagination={false}
  774. bordered
  775. size="small"
  776. />
  777. </div>
  778. </Spin>
  779. <ReactToPrint
  780. trigger={() => (
  781. <Button
  782. type="primary"
  783. style={{
  784. float: "right",
  785. marginTop: 10,
  786. position: "absolute",
  787. top: 0,
  788. right: 30,
  789. }}
  790. >
  791. 打印
  792. </Button>
  793. )}
  794. content={() => this.refs.all}
  795. />
  796. </Modal>
  797. }
  798. {
  799. //审核弹窗
  800. this.state.checkVisible &&
  801. <Modal
  802. maskClosable={false}
  803. title="审核订单"
  804. confirmLoading={this.state.loading}
  805. visible={this.state.checkVisible}
  806. onOk={this.toExamine}
  807. okText={this.state.result == 1 ? "通过" : this.state.result == 0 && "驳回"}
  808. onCancel={() => {
  809. this.loadData()
  810. this.setState({
  811. checkVisible: false,
  812. checkData: '',
  813. })
  814. }}
  815. >
  816. <TextArea
  817. value={this.state.checkData}
  818. onChange={(e) => {
  819. this.setState({
  820. checkData: e.target.value,
  821. })
  822. }}
  823. placeholder="请填写审核内容"
  824. />
  825. </Modal>
  826. }
  827. </div>
  828. );
  829. },
  830. });
  831. export default ProjectVip;