zhisuan—前端页面到后端

最新推荐文章于 2024-06-10 21:57:03 发布

凸-皿-凸

最新推荐文章于 2024-06-10 21:57:03 发布

阅读量165

点赞数

分类专栏： ZhiSuan 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_57127604/article/details/125994601

版权

ZhiSuan 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、创建里程碑修改记录表将操作记录下来

二、前端

①router.config.js 添加路径

②在MilestoneListAmend.js中编写页面

③milestone.js文件的编写

④api.js的编写

三、后端

①MilestoneController.java

②MilestoneAmendServiceImpl.java

③MilestoneAmendMapper.xml

一、创建里程碑修改记录表将操作记录下来

二、前端

①router.config.js 添加路径

          {
            bizCode: 'sp_milestone_amend',
            path: '/sales-platform/milestone-list-amend',
            name: '回款里程碑修改操作记录',
            component: './SalesPlatform/MilestoneListAmend',
          },

根据component路径建立对应的文件MilestoneListAmend.js

外嵌url中添加

      //里程碑修改记录
      {
        path: '/platform-out/milestone-list-amend',
        nativePath: '/sales-platform/milestone-list-amend',
        component: './SalesPlatform/MilestoneListAmend',
      },

注：要想界面菜单栏显示，得把router.config.js 文件，通过http://localhost:8078

丝袜哥的菜单导入

②在MilestoneListAmend.js中编写页面

import React, { PureComponent, Fragment, } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  Popconfirm,
  DatePicker,
  Modal,
  message,
  Divider,
  Steps,
  Table,
  Drawer,
  Switch,
  Tooltip,
} from 'antd';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Highlighter from 'react-highlight-words';
import FooterToolbar from '@/components/FooterToolbar';

import { AuthorizedOpration } from '@/utils/Authorized';
import { dateFormatYMD, dateFormatYMDHMS, getColumnSearchProps, getText } from '../Common/Common';
import ReactHTMLTableToExcel from 'react-html-table-to-excel';
import AssetsManageForm from '../HumanResource/AssetsManage/AssetsManageForm';
import DownloadExcel from '../../utils/DownloadExcel/DownloadExcel';
import { requestAuthMsg, authorityOpCheck } from '@/utils/Authorized';
import {
  MoreActionBtn
} from '@/components/Bctp';
import styles from './style.less';

@connect(({ milestone, loading, cache }) => ({
  milestone,
  loading: loading.models.milestone,
  cache,
}))

class MilestoneListAmend extends PureComponent {

  opModified = {
    searchText: ''
  }
  componentDidMount() {
    /**
     * 页面加载时，填充Table初始化数据
     */
    const { dispatch } = this.props;
    dispatch({
      type: 'milestone/fetchInit',
    });

    // dispatch({
    //   type: 'cache/fetchSearch',
    //   payload: ['contractName']
    // });

    // dispatch({
    //   type: 'cache/fetchSearch',
    //   payload: ['approveopModified']
    // });
  }

// 导出
handleExcelData = (columns, data) => {
  // 构造数据结构
  var dealData = {
    tableName: '回款里程碑修改操作记录基本信息',
    sheetName: '回款里程碑修改操作记录基本信息',
    columns: columns,
    excludeCols: ['操作'],
    handleCols: ['操作类型','状态'],
    rowDatas: data,
  };
  return dealData;
}

  handleSearch = (selectedKeys, confirm) => {
    confirm();
    this.setopModified({ searchText: selectedKeys[0] });
  };

  handleReset = clearFilters => {
    clearFilters();
    this.setopModified({ searchText: '' });
  };

  column = () => {
    return [
    {
      title: '合同名称',
      dataIndex: 'contractName',
      sorter: true,
      width: 120,
      className: styles.resultColumns,
      filters:this.props.cache.data['contractName'],
      sorter: (a, b) => a.contractName.localeCompare(b.contractName),
      ...getColumnSearchProps(this, 'contractName'),//搜索
      render:
      (text, record) => (
        <Tooltip title={record.contractName} trigger="click" placement="bottom">
          <div style={{ width: "92%", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "keep-all" }}>{record.contractName}</div>
        </Tooltip>
      ),
    },
    {
      title: '里程碑名称',
      dataIndex: 'milestoneNameNow',     
      width: 120,
      sorter: true,
      sorter: (a, b) => a.preReceivablesTime.localeCompare(b.milestoneNameNow),
      className: styles.resultColumns,           
      ...getColumnSearchProps(this, 'milestoneNameNow'),
      render:
      (text, record) => (
        <Tooltip title={record.milestoneNameNow} trigger="click" placement="bottom">
          <div style={{ width: "92%", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "keep-all" }}>{record.milestoneNameNow}</div>
        </Tooltip>
      ),
    },
    {
      title: '原计划回款时间',
      dataIndex: 'preReceivablesTime',
      sorter: true,
      width: 140,
      className: styles.resultColumns,
      sorter: true,
      sorter: (a, b) => a.preReceivablesTime.localeCompare(b.preReceivablesTime),
      ...getColumnSearchProps(this, 'preReceivablesTime'),
      render:
        (text, record) => (
          <Tooltip title={record.preReceivablesTime} trigger="click" placement="bottom">
            <div style={{ width: "92%", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "keep-all" }}>{record.preReceivablesTime}</div>
          </Tooltip>
        ),
    },
    {
      title: '现计划回款时间',//
      width:140,
      dataIndex: 'preReceivablesTimeNow',
      ...getColumnSearchProps(this, 'preReceivablesTimeNow'),
      sorter: true,
      sorter: (a, b) => a.preReceivablesTime.localeCompare(b.preReceivablesTimeNow),      
      render:
        (text, record) => (
          <Tooltip title={record.preReceivablesTimeNow} trigger="click" placement="bottom">
            <div style={{ width: "92%", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "keep-all" }}>{record.preReceivablesTimeNow}</div>
          </Tooltip>
        ),
    },
    {
      title: '原备注',
      width:150,
      dataIndex: 'remark',     
      ...getColumnSearchProps(this, 'remark'),      
      render:
        (text, record) => (
          <Tooltip title={record.remark} trigger="click" placement="bottom">
            <div style={{ width: "92%", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "keep-all" }}>{record.remark}</div>
          </Tooltip>
        ),
    },
    {
      title: '现备注',//
      width:150,
      dataIndex: 'remarkNow',
      ...getColumnSearchProps(this, 'remarkNow'),  
      render:
        (text, record) => (
          <Tooltip title={record.remarkNow} trigger="click" placement="bottom">
            <div style={{ width: "92%", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "keep-all" }}>{record.remarkNow}</div>
          </Tooltip>
        ),
    },
    {
      title: '负责人',//
      width:100,
      dataIndex: 'milestoneLeaderNow',     
      ...getColumnSearchProps(this, 'milestoneLeaderNow'), 
      render:
        (text, record) => (
          <Tooltip title={record.milestoneLeaderNow} trigger="click" placement="bottom">
            <div style={{ width: "92%", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "keep-all" }}>{record.milestoneLeaderNow}</div>
          </Tooltip>
        ),
    },
    {
      title: '修改人',
      width:100,
      dataIndex: 'opModified',
      ...getColumnSearchProps(this, 'opModified'), 
      render:
        (text, record) => (
          <Tooltip title={record.opModified} trigger="click" placement="bottom">
            <div style={{ width: "92%", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "keep-all" }}>{record.opModified}</div>
          </Tooltip>
        ),
    },
    {
      title: '修改时间',
      dataIndex: 'gmtCreateAmend',
      width: 150,
      sorter: true,
      sorter: (a, b) => a.gmtCreateAmend.localeCompare(b.gmtCreateAmend),
      ...getColumnSearchProps(this, 'gmtCreateAmend'),
      render:
      (text, record) => (
        <div className={styles.resultColumnsDiv}>{record.gmtCreateAmend}</div>
      ),
    },
    
  ]
}

  render() {
    const {
      milestone: { data },
      cache,
    } = this.props;
    return (
      <PageHeaderWrapper title="操作记录">
        <div>
          <Card>
            <div className={styles.clue}>
              <div className={styles.clueOperator}>
                <DownloadExcel excelData={this.handleExcelData(this.column(), data.myMilestoneListAmendList)} />                      
              </div>
              <Table
                  columns={this.column()}
                  scroll={{ x: 1300 }}
                  dataSource={data.myMilestoneListAmendList}
                >
                </Table>
            </div>
          </Card>
        </div>
      </PageHeaderWrapper>
    )
  }
}
export default MilestoneListAmend;

注：

标签名和实体类的字段名和xml通过数据库查出来的字段名需要一致

搜索：

...getColumnSearchProps(this, 'milestoneNameNow'),  //milestoneNameNow改对应的标签名

升序降序：

  sorter: true,
      sorter: (a, b) => a.preReceivablesTime.localeCompare(b.milestoneNameNow),

点击展示内容：

     (text, record) => (
        <Tooltip title={record.milestoneNameNow} trigger="click" placement="bottom">
          <div style={{ width: "92%", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "keep-all" }}>{record.milestoneNameNow}</div>
        </Tooltip>
      ),

③milestone.js文件的编写

④api.js的编写

三、后端

①MilestoneController.java

 /**
     * 回款里程碑操作记录表
     */
    @RequestMapping(value = "/AmendList")
    @ResponseBody
    public Object selectMilestoneAmendList(){
        Map<Object, Object> map = new HashMap<>();
        LoginUser user = AuthKit.getUser();
        Integer userId = user.getId();
        try {
            List<Map<String, Object>> myMilestoneListAmendList= milestoneAmendService.selectMilestoneAmendList(userId);
            map.put("myMilestoneListAmendList", myMilestoneListAmendList);
            SuccessTip successTip = new SuccessTip();
            successTip.setResult(map);
            return successTip;
        } catch (Exception e) {
            throw new GunsException(BizExceptionEnum.REQUEST_NULL);
        }
    }

②MilestoneAmendServiceImpl.java

    @Value("${dept.flow.root-id}")
    private Integer DEPT_ROOT_ID;

    @Override
    public List<Map<String, Object>> selectMilestoneAmendList(Integer userId) {
        DataScope[] dataScopes={
                GeneralOpUtil.defaultDataScope(Const.BIZ_CODE_SALE_MILESTONE,"saleDeptId","opCreate"),
                GeneralOpUtil.defaultDataScope(Const.BIZ_CODE_SALE_MILESTONE,"saleDeptId","saleLeader"),
                GeneralOpUtil.defaultDataScope(Const.BIZ_CODE_SALE_MILESTONE,"saleDeptId","proLeader"),
                GeneralOpUtil.defaultDataScope(Const.BIZ_CODE_SALE_MILESTONE,"saleDeptId","projectLeader"),
                GeneralOpUtil.defaultDataScope(Const.BIZ_CODE_SALE_MILESTONE,"saleDeptId","saleOpCreate"),
                GeneralOpUtil.defaultDataScope(Const.BIZ_CODE_SALE_MILESTONE,"milDeptId","milestoneLeader"),
                GeneralOpUtil.setDesDataScopeForName(Const.BIZ_CODE_SALE_MILESTONE, "opCreate"),
                GeneralOpUtil.setDataScopeForDeptName(Const.BIZ_CODE_SALE_MILESTONE,"companyBelong",DEPT_ROOT_ID)

        };
        return this.baseMapper.selectMilestoneAmendList(dataScopes,userId);
    }