index.jsx 8.1 KB

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