HcReport.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. <template>
  2. <el-dialog
  3. v-model="isShow" title="批量上报" class="hc-modal-border" destroy-on-close draggable width="47rem"
  4. append-to-body @closed="cancelReportClick"
  5. >
  6. <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="auto" size="large">
  7. <el-form-item label="任务名称" prop="taskName">
  8. <el-input v-model="formModel.taskName" disabled />
  9. </el-form-item>
  10. <el-form-item label="任务描述" prop="taskContent">
  11. <el-input
  12. v-model="formModel.taskContent" :autosize="{ minRows: 3, maxRows: 5 }"
  13. placeholder="请输入任务描述"
  14. type="textarea"
  15. />
  16. </el-form-item>
  17. <el-form-item label="任务流程" prop="fixedFlowId">
  18. <el-select v-model="formModel.fixedFlowId" block @change="handleProcessValue">
  19. <template v-for="item in processData" :key="item.id">
  20. <el-option :disabled="item.disabled" :label="item.fixedFlowName" :value="item.id" />
  21. </template>
  22. </el-select>
  23. </el-form-item>
  24. <el-form-item v-if="diyProcessUser" label="任务人" prop="userIds">
  25. <HcTasksUserVue class="w-full" @change="diyProcessUserChange" />
  26. </el-form-item>
  27. <el-form-item v-else label="任务人">
  28. <div class="form-item-div">
  29. {{ linkUserJoinString }}
  30. </div>
  31. </el-form-item>
  32. <el-form-item label="上报批次">
  33. <HcCounter v-model="formModel.batch" />
  34. </el-form-item>
  35. <el-form-item label="限定审批时间">
  36. <HcCounter v-model="formModel.restrictDay" text="(天)" />
  37. </el-form-item>
  38. </el-form>
  39. <template #footer>
  40. <div class="dialog-footer">
  41. <el-button size="large" @click="cancelReportClick">
  42. 取消
  43. </el-button>
  44. <el-button :loading="formReportLoading" hc-btn type="primary" @click="formReportClick">
  45. 提交
  46. </el-button>
  47. </div>
  48. </template>
  49. </el-dialog>
  50. </template>
  51. <script setup>
  52. import { ref, watch } from 'vue'
  53. import tasksFlowApi from '~api/tasks/flow'
  54. import { arrIndex, arrToId, arrToKey, formValidate } from 'js-fast-way'
  55. import HcTasksUserVue from './hc-tasks-user/index.vue'
  56. import { useAppStore } from '~src/store'
  57. const props = defineProps({
  58. show: {
  59. type: Boolean,
  60. default: false,
  61. },
  62. data: {
  63. type: Array,
  64. default: () => ([]),
  65. },
  66. })
  67. const emit = defineEmits(['hide', 'finish'])
  68. //初始变量
  69. const useAppState = useAppStore()
  70. const projectId = ref(useAppState.getProjectId)
  71. const contractId = ref(useAppState.getContractId)
  72. const isShow = ref(props.show)
  73. const formModel = ref({ batch: 1, restrictDay: 1 })
  74. //监听
  75. watch(() => [
  76. props.projectId,
  77. props.contractId,
  78. ], ([pid, cid]) => {
  79. projectId.value = pid
  80. contractId.value = cid
  81. })
  82. //监听
  83. watch(() => props.show, (val) => {
  84. isShow.value = val
  85. setReportData(val)
  86. })
  87. //表单
  88. const formRef = ref(null)
  89. const formRules = ref({
  90. taskContent: {
  91. required: false,
  92. trigger: 'blur',
  93. message: '请输入任务描述',
  94. },
  95. fixedFlowId: {
  96. required: true,
  97. trigger: 'blur',
  98. message: '请选择任务流程',
  99. },
  100. userIds: {
  101. required: true,
  102. trigger: 'blur',
  103. message: '请选择任务人',
  104. },
  105. })
  106. //处理上报数据
  107. const setReportData = (show) => {
  108. if (!show) return false
  109. let taskName = '', ids = ''
  110. for (let i = 0; i < props.data.length; i++) {
  111. const item = props.data[i]
  112. ids = ids ? `${ids},${item.id}` : item.id
  113. taskName = taskName ? `${taskName},${item.fileName}` : item.fileName
  114. }
  115. formModel.value.dataIds = ids
  116. formModel.value.taskName = taskName
  117. //获取任务流程
  118. processData.value = []
  119. getProcessDatasApi()
  120. }
  121. //获取流程数据
  122. const processDefaultData = [{ id: 0, fixedFlowName: '自定义流程', disabled: false }]
  123. const processData = ref([])
  124. const linkUserJoinString = ref('')
  125. const getProcessDatasApi = () => {
  126. processData.value = processDefaultData
  127. }
  128. //流程数据切换
  129. const diyProcessUser = ref(false)
  130. const handleProcessValue = (val) => {
  131. if (val > 0) {
  132. diyProcessUser.value = false
  133. const list = processData.value
  134. const index = arrIndex(list, 'id', val)
  135. linkUserJoinString.value = list[index]?.linkUserJoinString
  136. } else {
  137. linkUserJoinString.value = ''
  138. diyProcessUser.value = true
  139. }
  140. }
  141. //自定义流程任务人选择完毕
  142. const diyProcessUserChange = (user) => {
  143. let userArr = user
  144. formModel.value.userIds = arrToKey(userArr, 'userId', ',')
  145. }
  146. //取消
  147. const cancelReportClick = () => {
  148. linkUserJoinString.value = ''
  149. isShow.value = false
  150. emit('hide', false)
  151. }
  152. //上报
  153. const formReportClick = async () => {
  154. const res = await formValidate(formRef.value)
  155. if (res) await batchApprovalApi()
  156. }
  157. //上报请求
  158. const formReportLoading = ref(false)
  159. const batchApprovalApi = async () => {
  160. formReportLoading.value = true
  161. //发起请求
  162. const { error, code, data } = await tasksFlowApi.batchReportTaskArchive( {
  163. ...formModel.value,
  164. contractId:contractId.value,
  165. projectId:projectId.value,
  166. })
  167. linkUserJoinString.value = ''
  168. formReportLoading.value = false
  169. if (!error && code === 200) {
  170. isShow.value = false
  171. window.$message?.success('上报成功')
  172. emit('hide', false)
  173. emit('finish', data)
  174. } else {
  175. processData.value = []
  176. }
  177. emit('hide', false)
  178. emit('finish')
  179. }
  180. </script>
  181. <style lang="scss">
  182. .task-tag-data-box {
  183. position: relative;
  184. border: 1px solid #e0e0e6;
  185. border-radius: 4px;
  186. padding: 5px;
  187. min-height: 40px;
  188. display: flex;
  189. align-items: center;
  190. flex-flow: row wrap;
  191. width: 100%;
  192. .el-tag {
  193. margin: 5px;
  194. }
  195. }
  196. </style>