Skip to content

A
AppUms_Lecturer
Commit d278ae87 by tungnq
Options

TODO: Đã hoàn thiện xong giao diện cơ bản mà chi tiết văn bản đến

parent 47aca987
Showing with 298 additions and 23 deletions
src/components/Input/TextMulti.js
...@@ -22,6 +22,7 @@ const TextField = props => { ...@@ -22,6 +22,7 @@ const TextField = props => {
containerBackgroundColor, containerBackgroundColor,
onFocus, onFocus,
fontFamily, fontFamily,
height,
} = props; } = props;
return ( return (
...@@ -58,7 +59,7 @@ const TextField = props => { ...@@ -58,7 +59,7 @@ const TextField = props => {
textAlignVertical: 'top', textAlignVertical: 'top',
textAlign: 'left', textAlign: 'left',
color: 'black', color: 'black',
height: 210, height: height,
borderColor:R.colors.grayBorderInputTextHeader, borderColor:R.colors.grayBorderInputTextHeader,
borderWidth:1, borderWidth:1,
width: '100%', width: '100%',
......
src/screens/incoming_document/detail/index.js
import React from 'react'; import React, {useState} from 'react';
import {Text, View, StyleSheet} from 'react-native'; import {Text, View, StyleSheet} from 'react-native';
import DetailIncomingDocumentView from './view'; import DetailIncomingDocumentView from './view';
const DetailIncomingDocument = (props) => { const DetailIncomingDocument = (props) => {
const [icomingDocument, setIncomingDocument] = useState(
{
"id": 102934,
"title": "Văn bản thông báo lịch nộp thời khoá biểu của học kỳ 2 năm 2025",
"status": "Hạn chế",
"symbol_number": "2038475",
"number_entry_book": "12493-fh544",
"term": "29/07/2025",
"term_display": "09/07/2025",
"document_date": "2025-07-08",
"document_date_display": "08/07/2025",
"document_type": "Hành chính",
"field": "Thời khoá biểu",
"signer_name": "Nguyễn Minh Đức",
"sender_partner": "Võ Công Bình",
"note": "",
"content": "Ban lãnh đạo yêu cầu hoàn thành thời khoá biểu trong tháng cho các đơn vị chuyên môn, nộp đầy đủ công việc theo đúng kế hoạch.",
"opinion_bgh": "Thực hiện nhanh công tác thời khoá biểu",
"received_departments": [
{ "id": 1, "name": "Phòng đào tạo" },
{ "id": 2, "name": "Phòng đào tạo" }
],
"received_group": [{ "id": 12, "name": "Nhóm chuyên môn đào tạo" }],
"receiver": [{ "id": 55, "name": "Nguyễn Minh Đức" }],
"attachments": [
{
"id": "001247363",
"filename": "Quyết định thông báo đào tạo - 001247363",
"file_ext": "pdf",
"file_size": 0,
"download_url": "#",
"preview_url": "#"
}
],
"total_head_of_work": 7,
"approvals": [
{
"author": "Bút Tiến Công",
"code":"08569",
"date":"29/07/2025",
"time":"16:00",
"content": "Ban lãnh đạo yêu cầu hoàn thành thời khoá biểu trong tháng cho các đơn vị chuyên môn, nộp đầy đủ công việc theo đúng kế hoạch."
},
{
"author": "Nguyễn Thị Kim Phụng",
"code":"08569",
"date":"29/07/2025",
"time":"16:00",
"content": "Trưởng phòng xác nhận hợp bộ hồ sơ."
},
{
"author": "Đặng Duy Minh",
"code":"08569",
"date":"29/07/2025",
"time":"16:00",
"content": "Trưởng phòng nhập công bố quyết định nội bộ."
}
],
"actions": {
"can_create_task": true,
"create_task_label": "Tạo công việc"
}
}
) ;
return ( return (
<DetailIncomingDocumentView /> <DetailIncomingDocumentView
icomingDocument={icomingDocument}
/>
); );
}; };
......
src/screens/incoming_document/detail/style.js
import { StyleSheet, Text, View } from 'react-native' import { StyleSheet, Text, View } from 'react-native'
import React from 'react' import React from 'react'
import R from '../../../assets/R'
const styles = StyleSheet.create({}) const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: R.colors.white,
},
body:{
flex:1,
backgroundColor:R.colors.white,
marginHorizontal:15,
marginVertical:10
},
textSubTitle:{
fontSize:R.fontsize.fontSizeSubTitle,
fontWeight:'600',
fontFamily:R.fonts.fontMedium,
color:R.colors.black,
},
text_1:{
fontSize:R.fontsize.fontSizeContent,
fontWeight:'400',
fontFamily:R.fonts.fontRegular,
color:R.colors.blue,
},
text:{
fontSize:R.fontsize.fontSizeContent,
fontWeight:'600',
fontFamily:R.fonts.fontMedium,
color:R.colors.black,
},
text_2:{
fontSize:R.fontsize.fontSizeContent,
fontWeight:'400',
fontFamily:R.fonts.fontRegular,
color:R.colors.black,
},
textBtn:{
color:R.colors.black,
fontSize:R.sizes.xs,
fontWeight:'400',
fontFamily:R.fonts.fontRegular,
},
containerContent:{
padding:10,
borderRadius:10,
borderWidth:1,
borderColor:R.colors.grayBorderInputTextHeader,
},
cardContainerContent:{
backgroundColor:R.colors.white,
padding:10,
borderRadius:10,
borderWidth:1,
borderColor:R.colors.grayBorderInputTextHeader,
},
card:{
borderWidth:1,
borderColor:R.colors.grayBorderInputTextHeader,
borderRadius:100,
padding:10,
alignSelf:'flex-start',
backgroundColor:R.colors.brown,
marginHorizontal:5
},
containerBtn:{
flexDirection:'row',
alignItems:'center',
justifyContent:'space-around',
marginVertical:10,
borderRadius:10,
backgroundColor:R.colors.blue1,
padding:10,
width:300
}
})
export default styles export default styles
\ No newline at end of file
src/screens/incoming_document/detail/view.js
import React from 'react'; import React from 'react';
import {Text, View, TouchableOpacity, StyleSheet} from 'react-native'; import {Text, View, TouchableOpacity, StyleSheet, Image, ScrollView, FlatList} from 'react-native';
import R from '../../../assets/R';
const DetailIncomingDocumentView = (props) => { import styles from './style';
const { } = props; import Header from '../../../components/Header/Header';
import TextMulti from '../../../components/Input/TextMulti';
const DetailIncomingDocumentView = props => {
const {icomingDocument} = props;
console.log(props);
const getColor = (status) => {
switch (status) {
case 'Hạn chế':
return R.colors.brown;
case 'Công khai':
return R.colors.blue;
}
}
const renderItem = ({item}) => {
console.log(item);
return (
<View style={{marginVertical: 7.5}}>
<View style={{flexDirection: 'row', marginBottom:5}}>
<Text style={styles.text}>{item.author} - </Text>
<Text style={styles.text}>{item.code}{" "}</Text>
<Text style={styles.text}>{item.time}{" "}</Text>
<Text style={styles.text}>{item.date}</Text>
</View>
<View style={styles.containerContent}>
<Text style={styles.text_2}>{item.content}</Text>
</View>
</View>
)
}
return ( return (
<View <View style={styles.container}>
style={{ <Header title={'Văn bản 2038475'} isBack/>
flex: 1, <ScrollView showsVerticalScrollIndicator={false}>
justifyContent: 'center', <View style={styles.body}>
alignItems: 'center', <Text style = {styles.textSubTitle}>{icomingDocument.title}</Text>
}}> <View style={{marginTop:5}}></View>
<TouchableOpacity> <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',marginBottom:5}}>
<Text>DetailIncomingDocument</Text> <Text style={styles.text_1}>
</TouchableOpacity> Văn bản hiện có {icomingDocument.total_head_of_work} công việc liên {'\n'}quan
</Text>
<Text style={styles.text}>
Chế độ:
<Text style={{
fontWeight:'600',
fontFamily:R.fonts.fontMedium,
fontSize:R.fontsize.fontSizeContent,
color: getColor(icomingDocument.status)}}>{icomingDocument.status}</Text>
</Text>
</View>
<View style={{flexDirection: 'row', justifyContent: 'space-between',marginBottom:5}}>
<Text style={styles.text}>Số ký hiệu:
<Text style={styles.text_2}>{icomingDocument.symbol_number}</Text>
</Text>
<Text style={styles.text}>Số vào sổ:
<Text style={styles.text_2}>{icomingDocument.number_entry_book}</Text>
</Text>
</View>
<View style={{flexDirection: 'row', justifyContent: 'space-between',marginBottom:5}}>
<Text style={styles.text}>Ngày đến:
<Text style={styles.text_2}>{icomingDocument.term}</Text>
</Text>
<Text style={styles.text}>Ngày văn bản:
<Text style={styles.text_2}>{icomingDocument.term_display}</Text>
</Text>
</View>
<Text style={[styles.text , {marginBottom:5}]}>Loại văn bản:
<Text style={styles.text_2}>{icomingDocument.document_type}</Text>
</Text>
<Text style={[styles.text , {marginBottom:5}]}>Lĩnh vực văn bản:
<Text style={styles.text_2}>{icomingDocument.field}</Text>
</Text>
<View style={{flexDirection: 'row', justifyContent: 'space-between',marginBottom:5}}>
<Text style={styles.text}>Người ký:
<Text style={styles.text_2}>{icomingDocument.signer_name}</Text>
</Text>
<Text style={styles.text}>Đối tác gửi:
<Text style={styles.text_2}>{icomingDocument.sender_partner}</Text>
</Text>
</View>
<TextMulti title="Ghi chú" />
<View style={{marginTop:5}}></View>
<Text style={[styles.text, {marginBottom:3}]}>Nội dung</Text>
<View style={[styles.containerContent , {marginBottom:5}]}>
<Text style={styles.text_2}>{icomingDocument.content}</Text>
</View>
<Text style={[styles.text,{marginBottom:5}]}>
Ý kiến của BGH:
<Text style={styles.text_2}>{icomingDocument.opinion_bgh}</Text>
</Text>
<View style={{flexDirection:'row',flexWrap:'wrap',alignItems:'center', marginBottom:5}}>
<Text style={styles.text}>Phòng ban nhận :</Text>
{icomingDocument.received_departments.map((item, index) => {
return (
<View style={styles.card}>
<Text style={{color:R.colors.white}} key={index}>{item.name}</Text>
</View>
)
})}
</View>
<View style={{flexDirection:'row',flexWrap:'wrap',alignItems:'center', marginBottom:5}}>
<Text style={styles.text}>Nhóm nhận :</Text>
{icomingDocument.received_group.map((item, index) => {
return (
<View style={[styles.card , {backgroundColor:R.colors.blue}]}>
<Text style={{color:R.colors.white}} key={index}>{item.name}</Text>
</View>
)
})}
</View>
<View style={{flexDirection:'row',flexWrap:'wrap',alignItems:'center', marginBottom:5}}>
<Text style={styles.text}>Người nhận :</Text>
{icomingDocument.receiver.map((item, index) => {
return (
<View style={[styles.card , {backgroundColor:R.colors.blue}]}>
<Text style={{color:R.colors.white}} key={index}>{item.name}</Text>
</View>
)
})}
</View>
<Text style={[styles.text, {color:R.colors.blue}]}>
Tài liệu đính kèm
</Text>
<TouchableOpacity style={styles.containerBtn}>
<Text style={styles.textBtn}>
Quyết định thông báo đào tạo - QD347583
</Text>
<Image source={R.images.icDownload} style={{width: 20, height: 20}} resizeMode="contain" tintColor={R.colors.blue}/>
</TouchableOpacity>
<Text style={[styles.text, {color:R.colors.blue}]}>
Bút phê văn bản
</Text>
<FlatList
data={icomingDocument.approvals}
renderItem={renderItem}
keyExtractor={(item, index) => index.toString()}
/>
</View>
</ScrollView>
</View> </View>
); );
}; };
export default DetailIncomingDocumentView; export default DetailIncomingDocumentView;
const styles = StyleSheet.create({})
\ No newline at end of file
src/screens/incoming_document/view.js
...@@ -3,7 +3,6 @@ import { ...@@ -3,7 +3,6 @@ import {
Text, Text,
View, View,
TouchableOpacity, TouchableOpacity,
StyleSheet,
FlatList, FlatList,
Image, Image,
TextInput, TextInput,
...@@ -11,9 +10,10 @@ import { ...@@ -11,9 +10,10 @@ import {
import styles from './style'; import styles from './style';
import Header from '../../components/Header/Header'; import Header from '../../components/Header/Header';
import Dropdown from '../../components/DropdownAlert/Dropdown'; import Dropdown from '../../components/DropdownAlert/Dropdown';
import TextField from '../../components/Input/TextField';
import R from '../../assets/R'; import R from '../../assets/R';
import Button from '../../components/Button'; import Button from '../../components/Button';
import * as ScreenName from '../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native';
const IncomingDocumentView = props => { const IncomingDocumentView = props => {
const { const {
activeTab, activeTab,
...@@ -23,6 +23,7 @@ const IncomingDocumentView = props => { ...@@ -23,6 +23,7 @@ const IncomingDocumentView = props => {
setSearchQuery, setSearchQuery,
handleTabKey, handleTabKey,
} = props; } = props;
const navigation = useNavigation();
const getColor = status => { const getColor = status => {
switch (status) { switch (status) {
case 'Hạn chế': case 'Hạn chế':
...@@ -98,7 +99,7 @@ const IncomingDocumentView = props => { ...@@ -98,7 +99,7 @@ const IncomingDocumentView = props => {
<View style={{flex: 0.1}}></View> <View style={{flex: 0.1}}></View>
<Button <Button
title="Chi tiết" title="Chi tiết"
onPress={() => {}} onPress={() => navigation.navigate(ScreenName.DETAILINCOMINGDOCUMENT)}
backgroundColor={R.colors.blue} backgroundColor={R.colors.blue}
textColor={R.colors.white} textColor={R.colors.white}
height={25} height={25}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment