report.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. <template>
  2. <hc-sys class="hc-report-page" :isNavBar="false">
  3. <uni-card class="" :is-shadow="false" is-full>
  4. <text class="text-black text-df">{{formData.taskName ?? ''}}</text>
  5. </uni-card>
  6. <uni-section class="mt-2" title="上报审批表单" type="line">
  7. <view class="p-2">
  8. <uni-forms ref="formRef" :rules="formRules" :modelValue="formData" label-width="190rpx">
  9. <uni-forms-item label="上报说明" required name="taskContent">
  10. <uni-easyinput type="textarea" v-model="formData.taskContent" placeholder="请输入上报说明" />
  11. </uni-forms-item>
  12. <uni-forms-item label="上报流程" required name="fixedFlowId">
  13. <uni-data-select v-model="formData.fixedFlowId" :localdata="fixedFlowData" @change="fixedFlowChange"/>
  14. </uni-forms-item>
  15. <uni-forms-item class="hc-form-item" label="任务人" required name="userTasks" v-if="diyProcessUser">
  16. <view class="tasks-user-box" @click="userTasksClick">
  17. <view class="tag-user-list" v-if="formData.userTasks && formData.userTasks.length > 0">
  18. <template v-for="(item, index) in formData.userTasks">
  19. <uni-tag :text="item.userName" type="primary"/>
  20. <text class="i-ri-arrow-right-line arrow-icon-tag" v-if="(formData.userTasks.length - 1) > index"/>
  21. </template>
  22. </view>
  23. <view v-else class="tasks-placeholder">点击这里选择任务人</view>
  24. </view>
  25. </uni-forms-item>
  26. <uni-forms-item class="hc-form-item" label="任务人" v-else>
  27. <view class="form-item-div">{{ linkUserJoinString }}</view>
  28. </uni-forms-item>
  29. <uni-forms-item class="hc-form-item" label="上报批次">
  30. <uni-number-box v-model="formData.batch" :min="1"/>
  31. </uni-forms-item>
  32. <uni-forms-item class="hc-form-item" label="限定审批时间">
  33. <uni-number-box v-model="formData.restrictDay" :min="1"/>
  34. <text class="text ml-4">(天)</text>
  35. </uni-forms-item>
  36. </uni-forms>
  37. </view>
  38. </uni-section>
  39. <!--底部操作栏-->
  40. <HcTabbarBlock :height="77"/>
  41. <hc-tabbars>
  42. <button type="primary" class="action-bar-btn" @click="submitClick">确认上报</button>
  43. </hc-tabbars>
  44. </hc-sys>
  45. </template>
  46. <script setup>
  47. import {ref, onMounted, nextTick, getCurrentInstance} from "vue";
  48. import { ApprovalApi, queryFixedFlow } from '~api/other/index'
  49. import {arrIndex, getArrValue, getObjValue} from "js-fast-way";
  50. import {errorToast, successToast, formValidate} from "@/utils/tools";
  51. import flowApi from '~api/tasks/flow'
  52. //页面传参数据
  53. const instance = getCurrentInstance().proxy
  54. const props = ref({})
  55. //渲染完成
  56. onMounted(async () => {
  57. await getEventChannel();
  58. getFixedFlowDataApi().then();
  59. // 设置自定义表单校验规则,必须在节点渲染完毕后执行
  60. formRef.value?.setRules(formRules)
  61. })
  62. //页面传参数据
  63. let eventChannel = null;
  64. const getEventChannel = async () => {
  65. await nextTick();
  66. eventChannel = instance.getOpenerEventChannel();
  67. eventChannel.on('reportProps', (data) => {
  68. const res = getObjValue(data);
  69. const addition = getObjValue(res.addition)
  70. props.value = res
  71. //初始表单
  72. formData.value = {
  73. ids: res.ids,
  74. userTasks: [],
  75. taskName: res.taskName,
  76. taskContent: '',
  77. fixedFlowId: '',
  78. batch: 1,
  79. restrictDay: 1,
  80. trialSelfInspectionRecordId: res.trialSelfInspectionRecordId ?? '',
  81. ...addition,
  82. }
  83. })
  84. }
  85. //获取流程数据
  86. const fixedFlowData = ref([])
  87. const linkUserJoinString = ref('')
  88. const fixedFlowDefault = [{
  89. value: 0, text: '自定义流程', disable: false, linkUserJoinString: null
  90. }]
  91. const getFixedFlowDataApi = async () => {
  92. uni.showLoading({title: '获取数据中...', mask: true});
  93. const { type, typeData } = props.value
  94. if (type === 'first' || type === 'log' || type === 'wbs') {
  95. await queryFixedFlowApi(type, typeData)
  96. } else {
  97. await getProcessData()
  98. }
  99. uni.hideLoading();
  100. }
  101. //获取流程数据
  102. const getProcessData = async () => {
  103. linkUserJoinString.value = ''
  104. fixedFlowData.value = fixedFlowDefault
  105. const { projectId, contractId } = props.value
  106. const { error, code, data } = await flowApi.getPageData({
  107. projectId: projectId,
  108. contractId: contractId,
  109. current: 1, size: 100,
  110. })
  111. if (!error && code === 200) {
  112. const arr = getArrValue(data['records'])
  113. for (let i = 0; i < arr.length; i++) {
  114. fixedFlowData.value.push({
  115. value: arr[i].id,
  116. text: arr[i].fixedFlowName,
  117. disable: arr[i].disabled,
  118. linkUserJoinString: arr[i].linkUserJoinString
  119. })
  120. }
  121. }
  122. }
  123. //获取符合条件的预设流程(三大填报页、日志列表的批量上报、首件列表的批量上报)
  124. const queryFixedFlowApi = async (type, datas) => {
  125. let flowJson = {}
  126. if (type === 'first') {
  127. flowJson['firstId'] = datas
  128. } else if (type === 'log') {
  129. flowJson['theLogPrimaryKeyId'] = datas
  130. } else if (type === 'wbs') {
  131. flowJson['privatePKeyId'] = datas
  132. }
  133. //请求数据
  134. linkUserJoinString.value = ''
  135. fixedFlowData.value = fixedFlowDefault
  136. const { projectId, contractId } = props.value
  137. const { error, code, data } = await queryFixedFlow({
  138. projectId: projectId,
  139. contractId: contractId,
  140. ...flowJson,
  141. })
  142. if (!error && code === 200) {
  143. const arr = getArrValue(data['records'])
  144. for (let i = 0; i < arr.length; i++) {
  145. fixedFlowData.value.push({
  146. value: arr[i].id,
  147. text: arr[i].fixedFlowName,
  148. disable: arr[i].disabled,
  149. linkUserJoinString: arr[i].linkUserJoinString
  150. })
  151. }
  152. }
  153. }
  154. //任务流程
  155. const diyProcessUser = ref(false)
  156. const fixedFlowChange = (val) => {
  157. if (val > 0) {
  158. diyProcessUser.value = false
  159. const list = fixedFlowData.value
  160. const index = arrIndex(list, 'value', val)
  161. linkUserJoinString.value = list[index]?.linkUserJoinString
  162. formData.value.userTasks = []
  163. } else {
  164. linkUserJoinString.value = ''
  165. formData.value.userTasks = []
  166. diyProcessUser.value = true
  167. }
  168. }
  169. //表单数据
  170. const formRef = ref(null)
  171. const formData = ref({
  172. userTasks: [],
  173. })
  174. const formRules = {
  175. taskContent: {
  176. rules: [{
  177. required: true,
  178. errorMessage: '上报说明不能为空'
  179. }]
  180. },
  181. fixedFlowId: {
  182. rules: [{
  183. required: true,
  184. errorMessage: '上报流程不能为空'
  185. }]
  186. },
  187. userTasks: {
  188. rules: [{
  189. required: true,
  190. errorMessage: '任务人不能为空'
  191. }]
  192. },
  193. }
  194. //选择任务人
  195. const userTasksClick = () => {
  196. const { type, typeData, projectId, contractId } = props.value
  197. uni.navigateTo({
  198. url: '/pages/report/tasks-user',
  199. events:{
  200. flowUserList: function(data) {
  201. formData.value.userTasks = data
  202. }
  203. },
  204. success: function(res){
  205. const {userTasks} = formData.value
  206. res.eventChannel.emit('flowUserData', {
  207. type: type,
  208. typeData: typeData,
  209. projectId: projectId,
  210. contractId: contractId,
  211. selectedData: userTasks
  212. })
  213. }
  214. });
  215. }
  216. //确认提交
  217. const submitClick = async () => {
  218. const res = await formValidate(formRef.value)
  219. if (!res) return false;
  220. //发起请求
  221. uni.showLoading({title: '上报审批中...', mask: true});
  222. const { projectId, contractId, url } = props.value
  223. const { error, code, msg } = await ApprovalApi(url, {
  224. projectId: projectId,
  225. contractId: contractId,
  226. ...formData.value,
  227. })
  228. uni.hideLoading();
  229. if (!error && code === 200) {
  230. successToast('上报成功', 3000);
  231. //eventChannel.emit('finish');
  232. setTimeout(() => {
  233. //跳转到任务列表
  234. uni.switchTab({
  235. url: '/pages/task/index'
  236. });
  237. //uni.navigateBack();
  238. }, 3000)
  239. } else {
  240. errorToast(msg);
  241. }
  242. }
  243. </script>
  244. <style lang="scss">
  245. @import "@/style/report/report.scss";
  246. </style>