Untitled
user_4058768
plain_text
a year ago
14 kB
7
Indexable
import React from 'react'; import { Link } from 'react-router-dom'; import { AdminModal, AdminPage, FormCheckbox, FormDatePicker, FormSelect, FormTextBox, TableCell, TableHead, getValue, renderDataTable, renderTable } from 'view/component/AdminPage'; import { createSdhHoiDong, getSdhHoiDongPage, updateSdhHoiDong } from './redux'; import { connect } from 'react-redux'; import { SelectAdapter_FwCbhd, SelectAdapter_FwSinhVienWithDeTaiSDH } from '../sdhDeTai/redux'; import { SelectAdapter_FwVaiTroCbhd } from '../sdhVaiTroCanBoHuongDan/redux'; import Pagination from 'view/component/Pagination'; class EditCBHD extends React.Component { state = { data: {} } componentDidMount() { this.shcc?.value(this.props.item?.shcc); this.vaiTro?.value(this.props.item?.vaiTro); // this.ghiChu?.value(this.props.item?.ghiChu); // this.hoTenCanBo?.value(this.props.item?.hoTenCanBo); } handleShccCbhd = (selectCbhd) => { this.setState({ data: { ...this.state.data, shcc: selectCbhd?.id, belongTo: selectCbhd?.belong_to } }); } handleVaiTroCbhd = (selectVaiTro) => { this.setState({ data: { ...this.state.data, vaiTro: selectVaiTro?.id } }); } // handleGhiChuCbhd = (ghiChu, callback) => { // const expectedFormat = /^[^\-]+ [^\-]+ [^\-]+$/; // if (!expectedFormat.test(ghiChu)) { // T.notify('Định dạng ghi chú không đúng. Mong đợi: Chức danh cao nhất | Học vị cao nhất | Họ và tên', 'danger'); // return; // } // let fullInfo = ghiChu.trim(); // let infoParts = fullInfo.split(' '); // let trinhDo = infoParts.slice(0, 2).join(' '); // let hoTenCanBo = infoParts.slice(2).join(' '); // let shcc = this.state.data.shcc || ''; // this.setState({ data: { ...this.state.data, ghiChu: ghiChu, hoTenCanBo: hoTenCanBo, shcc: shcc, trinhDo: trinhDo } }, () => { // callback(this.state.data); // }); // } handleSubmit = (e) => { e.preventDefault(); // const { listTvhd } = this.props; // const { data } = this.state; T.notify('cap nhat thanh cong', 'success'); this.props.onSave(this.state.data); }; render() { const { readOnly } = this.props; return <div className='row'> <FormSelect ref={e => this.shcc = e} label='Cán bộ hướng dẫn' data={SelectAdapter_FwCbhd} className='col-md-6' allowClear readOnly={false} onChange={e => this.handleShccCbhd(e)} /> <FormSelect ref={e => this.vaiTro = e} label='Vai trò' data={SelectAdapter_FwVaiTroCbhd} className='col-md-6' readOnly={false} allowClear onChange={e => this.handleVaiTroCbhd(e)} /> {/* <FormRichTextBox ref={e => this.ghiChu = e} maxLength={1999} label='Ghi chú' placeholder='<Chức danh cao nhất> <Học vị cao nhất> <Họ và tên>. Vd: PGS TS Nguyễn Văn A' className='col-md-12' readOnly={false} /> */} {readOnly ? '' : <div className='col-md-12 d-flex justify-content-end' style={{ marginTop: 15, marginBottom: 15 }}> <button type='button' className='btn btn-success rounded-0' onClick={(e) => { this.handleSubmit(e); }}> <i className='fa fa-fw fa-lg fa-save' />Lưu </button> <button type='button' className='btn btn-danger rounded-0' onClick={(e) => e.preventDefault() || this.props.onDelete(this.props.item)}> <i className='fa fa-fw fa-lg fa-trash' />Xoá </button> </div>} </div>; } } class EditModal extends AdminModal { state = { data: {}, listTvhd: [], mssv: '' } listRow = []; onShow = (item) => { console.log(item, 'item'); let { id, tenHoiDong, phong, ngayBaoCao, action, mssv, thanhVienHoiDong } = item ? item : { id: '', tenHoiDong: '', phong: '', ngayBaoCao: '', action: '', mssv: '', thanhVienHoiDong: '' }; if (thanhVienHoiDong.length > 0) { const listTvhd = thanhVienHoiDong.map(tvhd => ({ shcc: `${tvhd.MSCB} - ${tvhd.from}`, vaiTro: tvhd.vaiTro, ghiChu: '', hoTenCanBo: '' })); this.setState({ listTvhd }); } this.setState({ id }, () => { this.tenHoiDong.value(tenHoiDong ?? ''); this.phong.value(phong ?? ''); this.ngayBaoCao.value(ngayBaoCao ?? ''); console.log(ngayBaoCao, '1'); this.soQuyetDinh.value(this.props.newSoQuyetDinh + 1 ?? ''); this.action.value(action ?? ''); this.mssv.value(mssv ?? ''); }); } createTempCbhd = () => { this.setState({ listTvhd: [...this.state.listTvhd, {}] }); } handleMssvChange = (selectMssv) => { console.log(selectMssv, 'selectMssv'); this.setState({ mssv: selectMssv?.id }); } handleCbhdChange = (index, updatedCbhd) => { let listTvhd = [...this.state.listTvhd]; listTvhd[index] = { ...listTvhd[index], ...updatedCbhd }; this.setState({ listTvhd }); } onSubmit = (e) => { e.preventDefault(); console.log(this.state, 'state'); let changes = { tenHoiDong: getValue(this.tenHoiDong), phong: getValue(this.phong), ngayBaoCao: new Date(getValue(this.ngayBaoCao)).getTime(), soQuyetDinh: getValue(this.soQuyetDinh), action: getValue(this.action), mssv: this.state.mssv || getValue(this.mssv), tvhd: this.state.listTvhd }; console.log(this.state, 'state22', changes.mssv, 'mssv'); if (this.state.id) { console.log('01'); this.props.update(this.state.idHoiDong, changes, () => { this.setState({ listTvhd: [] }); this.hide(); }); } else { changes.action = 'Tạo hội đồng'; console.log('2', 'taomoi'); this.props.create(changes, () => { this.setState({ listTvhd: [] }); this.hide(); }); } } render = () => { const { listTvhd } = this.state; return this.renderModal({ title: this.state.id ? 'Cập nhật đề tài' : 'Tạo mới đề tài', size: 'large', body: <div className='row'> <FormTextBox className='col-md-8' ref={e => this.tenHoiDong = e} label='Tên hội đồng' /> <FormTextBox className='col-md-4' ref={e => this.soQuyetDinh = e} label='Số quyết định' required /> <FormTextBox className='col-md-8' ref={e => this.action = e} label='Hành động' placeholder={this.state.id ? '' : 'Tạo hội đồng'} disabled={!this.state.id} /> <FormTextBox className='col-md-4' ref={e => this.phong = e} label='Phòng báo cáo' /> <FormDatePicker className='col-md-6' ref={e => this.ngayBaoCao = e} label='Ngày báo cáo' type='date' /> <FormSelect className='col-md-6' ref={e => this.mssv = e} label='MSSV' data={SelectAdapter_FwSinhVienWithDeTaiSDH} onChange={(e) => this.handleMssvChange(e)} required /> <div className='col-md-12' style={{ marginTop: 5 }}> {listTvhd?.map((item, index) => <EditCBHD ref={e => this.listRow[index + 1] = e} key={index} item={item} listTvhd={listTvhd} onChange={(updateCbhd) => this.handleCbhdChange(index, updateCbhd)} onSave={(savedCbhd) => this.handleCbhdChange(index, savedCbhd)} onDelete={() => this.setState({ listTvhd: listTvhd.filter((_, i) => i !== index) })} ></EditCBHD>)} <tr> <TableCell style={{ width: 'auto', textAlign: 'center', whiteSpace: 'nowrap' }} colSpan={5} content={ <div className='d-flex justify-content-center'> <button className='btn btn-success rounded-0' onClick={(e) => e.preventDefault() || this.createTempCbhd()}> <i className='fa fa-fw fa-lg fa-plus' />Thêm CBHD mới </button> </div> } > </TableCell> </tr> </div> </div> }); } } class SDHHoiDongPage extends AdminPage { state = { filter: {}, isKeySearch: false, isCoDinh: false, isFixCol: false }; componentDidMount() { T.ready('/user/sau-dai-hoc', () => { this.getPage(); console.log(this.getPage(), 'page'); }); } onEdit = (e, item) => { e.preventDefault(); this.modal.show(item); } onDelete = (e, item) => { e.preventDefault(); T.confirm('Xoá hội đồng', 'Bạn có chắc chắn muốn xoá hội đồng này?', true, isConfirm => { isConfirm && this.props.deleteSdhHoiDong(item.Id); }); } handleKeySearch = (data, pageNumber, pageSize, pageCondition) => { this.setState({ filter: { ...this.state.filter, [data.split(':')[0]]: data.split(':')[1] } }, () => { this.getPage(pageNumber, pageSize, pageCondition); }); } getPage = (pageN, pageS, pageC) => { let filter = { ...this.state.filter }; this.props.getSdhHoiDongPage(pageN, pageS, pageC, filter); } render() { const permission = this.getUserPermission('sdhHoiDong'); const { pageNumber, pageSize, pageTotal, totalItem, pageCondition, newestSoQuyetDinh, list } = this.props.sdhHoiDong?.page || { pageNumber: 1, pageSize: 25, pageTotal: 0, totalItem: 0, pageCondition: '', newestSoQuyetDinh: '', list: [] }; const onKeySearch = this.state.isKeySearch ? this.handleKeySearch : null; let table = renderDataTable({ className: this.state.isFixCol ? 'table-fix-col' : '', data: list, stickyHead: this.state.isCoDinh, header: 'thead-light', empty: 'Chưa có dữ liệu', renderHead: () => ( <tr> <th style={{ width: 'auto', verticalAlign: 'middle' }} >#</th> <TableHead keyCol='tenDeTai' content='Tên đề tài' style={{ minWidth: '260px', whiteSpace: 'nowrap' }} onKeySearch={onKeySearch} /> <TableHead keyCol='tenSinhVien' content='Tên sinh viên' style={{ minWidth: '220px', whiteSpace: 'nowrap' }} onKeySearch={onKeySearch} /> <TableHead keyCol='tenHoiDong' content='Tên hội đồng' style={{ minWidth: '200px', whiteSpace: 'nowrap' }} onKeySearch={onKeySearch} /> <TableHead content='Phòng' style={{ minWidth: '80px', whiteSpace: 'nowrap' }} onKeySearch={onKeySearch} /> <TableHead content='Tên CBHD' style={{ minWidth: '220px', whiteSpace: 'nowrap' }} /> <TableHead content='Ngày báo cáo' style={{ width: 'auto', whiteSpace: 'nowrap' }} /> <TableHead content='Thao tác' style={{ width: 'auto', whiteSpace: 'nowrap' }} /> </tr> ), renderRow: (item, index) => ( <tr key={index}> <TableCell content={(pageNumber - 1) * pageSize + index + 1} /> <TableCell content={item.tenDeTai ?? ''} /> <TableCell content={item.hoTenSinhVien ?? ''} /> <TableCell content={item.tenHoiDong ?? ''} /> <TableCell content={item.phong ?? ''} /> <TableCell content={item.tenCBHD ?? ''} /> <TableCell type='date' dateFormat='dd/mm/yyyy HH:MM' content={item.ngayBaoCao ?? ''} /> <TableCell type='buttons' permission={{ ...permission }} onEdit={(e) => this.onEdit(e, item)} onDelete={(e) => this.onDelete(e, item)} /> </tr> ) }); return this.renderPage({ icon: 'fa fa-list', title: 'Danh mục hội đồng', breadcrumb: [ <Link key={1} to='/user/sau-dai-hoc'>Sau đại học</Link>, 'Quản lý đề tài' ], content: <div className='p-2' style={{ background: 'white' }}> <div className='d-flex justify-content-between align-items-center'> <div style={{ gap: 10, display: 'inline-flex', width: '800px' }}> <FormCheckbox label='Tìm theo cột' onChange={value => this.setState({ isKeySearch: value })} ref={e => this.isKeySearch = e} style={{ marginBottom: '0' }} /> <FormCheckbox label='Cố định bảng' onChange={value => this.setState({ isCoDinh: value })} ref={e => this.isCoDinh = e} style={{ marginBottom: '0' }} /> <FormCheckbox label='Thao tác nhanh' onChange={value => this.setState({ isFixCol: value })} ref={e => this.isFixCol = e} style={{ marginBottom: '0' }} /> </div> <Pagination style={{ position: 'unset', justifyContent: 'end', marginBottom: '1rem' }} {...{ pageNumber, pageSize, pageTotal, totalItem, pageCondition }} getPage={this.getPage} /> </div> <div className='tile'>{table}</div> <EditModal ref={e => this.modal = e} create={this.props.createSdhHoiDong} update={this.props.updateSdhHoiDong} newSoQuyetDinh={newestSoQuyetDinh} /> </div> , backRoute: '/user/sau-dai-hoc/topic-program', collapse: [ { icon: 'fa-plus-square', name: 'Tạo hội đồng', permission: permission.write, onClick: e => e.preventDefault() || this.modal.show(), type: 'info' }, // { icon: 'fa-cloud-upload', name: 'Import công trình cán bộ hướng dẫn', permission: permission.write, onClick: e => e.preventDefault() || this.uploadModal.show(), type: 'warning' }, // { icon: 'fa-file-text', name: 'Export công trình cán bộ hướng dẫn', permission: permission.export || permission.write, onClick: e => e.preventDefault() || this.exportCongTrinhCBHD(), type: 'danger' }, // { icon: 'fa-print', name: 'Export TuyenSinh', permission: permission.export || permission.write, onClick: e => e.preventDefault() || this.exportDSTuyenSinh(), type: 'primary' } ], }); } } const mapStateToProps = state => ({ system: state.system, sdhHoiDong: state.sdh.sdhHoiDong }); const mapActionsToProps = { getSdhHoiDongPage, createSdhHoiDong, updateSdhHoiDong }; export default connect(mapStateToProps, mapActionsToProps)(SDHHoiDongPage);
Editor is loading...
Leave a Comment