index.jsx 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  1. import React, { Component } from 'react'
  2. import { connect } from 'react-redux'
  3. import { Input, Textarea, View, Text, Picker, Button } from '@tarojs/components'
  4. import Taro, { getCurrentInstance } from '@tarojs/taro';
  5. import dayjs from 'dayjs';
  6. import Skeleton from 'taro-skeleton'
  7. import ImagePicker from '../../components/common/imagePicker';
  8. import { updateRecord, recordDetails } from '../../utils/servers/servers';
  9. import { resourceAddress } from "../../utils/config";
  10. import './index.less';
  11. // import '../punchClock/index.less'
  12. import 'taro-ui/dist/style/components/noticebar.scss';
  13. import 'taro-ui/dist/style/components/icon.scss';
  14. import 'taro-ui/dist/style/components/list.scss';
  15. import "taro-ui/dist/style/components/radio.scss";
  16. import "taro-ui/dist/style/components/icon.scss";
  17. class ReClockin extends Component {
  18. $instance = getCurrentInstance();
  19. constructor(props) {
  20. super(props);
  21. this.state = {
  22. imgs: [],
  23. loading: false,
  24. selector: [{ value: 0, lable: "调研阶段" },],
  25. dateSel: dayjs().format('YYYY-MM-DD'),
  26. duration: "",
  27. selectorChecked: {},
  28. content: "",
  29. data: {},
  30. isOpened: false,
  31. }
  32. this.onChange = this.onChange.bind(this);
  33. this.updateRecordClockIn = this.updateRecordClockIn.bind(this);
  34. }
  35. componentDidMount() {
  36. this.getReleasetDails();
  37. }
  38. componentWillMount() {
  39. }
  40. componentDidHide() {
  41. }
  42. // 项目详情
  43. getReleasetDails() {
  44. recordDetails({
  45. id: this.$instance.router.params.id,
  46. }).then((v) => {
  47. if (v.code === 200) {
  48. if (v.data) {
  49. let list = [];
  50. for (let i of (v.data.annexUrl || '').split(',')) {
  51. if (i) {
  52. list.push({ 'url': resourceAddress + i })
  53. }
  54. }
  55. this.setState({
  56. data: v.data,
  57. pid: v.data.pid,
  58. imgs: list,
  59. selectorChecked: this.state.selector[v.data.projectStatus],
  60. duration: v.data.duration,
  61. content: v.data.content,
  62. processStatus: v.data.processStatus,
  63. recordTime: v.data.recordTime,
  64. isOpened: true,
  65. })
  66. }
  67. } else {
  68. Taro.showToast({ title: v.msg, icon: "none" });
  69. }
  70. }).catch((err) => {
  71. Taro.showToast({ title: "系统错误,请稍后再试", icon: "none" });
  72. });
  73. }
  74. onChange(value, type) {
  75. let arr = this.state.imgs.concat([]);
  76. if (type === "add") {
  77. arr.push(value);
  78. } else if (type === "remove") {
  79. arr.splice(value, 1);
  80. }
  81. this.setState({
  82. imgs: arr,
  83. });
  84. }
  85. updateRecordClockIn() {
  86. let arr = []
  87. for (let i of this.state.imgs) {
  88. if (!!i.url) {
  89. arr.push(i.url.split(resourceAddress).join(""));
  90. } else {
  91. arr.push(i)
  92. }
  93. }
  94. if (!this.state.dateSel) {
  95. Taro.showToast({ title: '请选择研发时间!', icon: 'none' });
  96. return
  97. }
  98. if (!this.state.duration) {
  99. Taro.showToast({ title: '请填写工时!', icon: 'none' });
  100. return
  101. }
  102. if (!this.state.selectorChecked) {
  103. Taro.showToast({ title: '请选择研发阶段!', icon: 'none' });
  104. return
  105. }
  106. Taro.showLoading({ title: '打卡中...' });
  107. updateRecord({
  108. id: this.$instance.router.params.id,
  109. pid: this.state.data.pid,
  110. projectStatus: this.state.selectorChecked.value,
  111. duration: this.state.duration,
  112. content: this.state.content,
  113. annexUrl: arr.join(','),
  114. processStatus: 1,
  115. recordTime: this.state.dateSel,
  116. }).then(v => {
  117. Taro.hideLoading()
  118. if (v.code === 200) {
  119. Taro.showToast({ title: '打卡成功', icon: 'none' });
  120. Taro.navigateBack({ delta: 1 });
  121. } else {
  122. Taro.showToast({ title: v.msg, icon: 'none' })
  123. }
  124. }).catch(() => {
  125. Taro.hideLoading()
  126. Taro.showToast({
  127. title: '系统错误,请稍后再试',
  128. icon: 'none'
  129. })
  130. })
  131. }
  132. render() {
  133. const { data } = this.state;
  134. return (
  135. <View className='punchClock'>
  136. <View className='header'>
  137. <Skeleton
  138. title
  139. avatar
  140. row={2}
  141. animateName='elastic'
  142. avatarShape='square'
  143. loading={this.state.loading}
  144. >
  145. <View className='headerContent'>
  146. <View className='item' style={{ width: "100%", display: "flex", flexDirection: "row", JustifyContent: "space-between" }}>
  147. <View className="item_name">{data.name}</View>
  148. {/* <AtButton type="primary" size="small"
  149. onClick={() => {
  150. Taro.switchTab({
  151. url: "/pages/project/index",
  152. });
  153. }}>切换</AtButton> */}
  154. </View>
  155. <View className='item'>
  156. <View className='ititle'><Text style={{ color: "red", width: "7px" }}>*</Text>研发时间:
  157. <Picker mode='date'
  158. onChange={e => {
  159. console.log("===", e.detail.value)
  160. this.setState({
  161. dateSel: e.detail.value
  162. })
  163. }}>
  164. <View className='picker'>
  165. {!!this.state.dateSel ? this.state.dateSel : "请选择"}
  166. </View>
  167. </Picker>
  168. </View>
  169. </View>
  170. <View className='items'>
  171. <View className='ititle'><Text style={{ color: "red", width: "7px" }}>*</Text>研发工时:
  172. <Input value={this.state.duration} type='digit' className='input' placeholder='请输入'
  173. style={{ textAlign: "center", background: "#D7D7D7", borderRadius: "15px", padding: "3px 5px" }}
  174. onInput={e => {
  175. this.setState({
  176. duration: e.detail.value
  177. })
  178. }}
  179. />小时&nbsp;
  180. <Text style={{ color: "red", fontSize: "10px" }}>注:工时可含1个小数点</Text>
  181. </View>
  182. </View>
  183. <View className='item'>
  184. <View className='ititle'><Text style={{ color: "red", width: "7px" }}>*</Text>研发阶段:
  185. <Picker mode='selector' range={this.state.selector} rangeKey="lable"
  186. onChange={e => {
  187. this.setState({
  188. selectorChecked: this.state.selector[e.detail.value]
  189. })
  190. }}>
  191. <View className='picker'>
  192. {!!this.state.selectorChecked ? this.state.selectorChecked.lable : "请选择"}
  193. </View>
  194. </Picker>
  195. </View>
  196. </View>
  197. <View className='items'>
  198. <View className='ititles'><Text style={{ width: "7px" }}></Text>研发记录:
  199. <Textarea
  200. value={this.state.content}
  201. style='background:#D7D7D7;width:66%;min-height:70px;border:1px solid #d6e4ef;padding:10px;border-radius: 10px' autoHeight
  202. onInput={e => {
  203. this.setState({
  204. content: e.detail.value
  205. })
  206. }}
  207. />
  208. </View>
  209. </View>
  210. <View className='items'>
  211. <View className='ititles'><Text style={{ width: "7px" }}></Text>上传附件:</View>
  212. {this.state.isOpened > 0 &&
  213. <ImagePicker
  214. showAddBtn
  215. files={this.state.imgs}
  216. ref={(ref) => (this.imagePickerRef = ref)}
  217. url="/api/project/upload"
  218. onChange={this.onChange}
  219. />}
  220. <View>
  221. <Text className='text'>注:包括研发日志、实验报告、实验记录、检测报告、会议纪要、会议照片等</Text>
  222. </View>
  223. </View>
  224. <View className='content'>
  225. <View className='punchClockContent'
  226. onClick={this.updateRecordClockIn}
  227. style={{
  228. boxShadow: '1px 1px 15px 1px #acb8ad',
  229. background: '#009DD9',
  230. }}>
  231. <View className='punchClockTitle'>重新打卡</View>
  232. </View>
  233. </View>
  234. </View>
  235. </Skeleton>
  236. </View>
  237. </View>
  238. )
  239. }
  240. }
  241. export default ReClockin