indexAgent.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. <template>
  2. <flow-form :data="formData" @submit="submitNextActivity">
  3. <card title="基础信息">
  4. <van-form required="auto" :readonly="formRead">
  5. <van-cell-group inset>
  6. <van-field
  7. v-model="formData.userNickname"
  8. name="申请人"
  9. label="申请人"
  10. placeholder="申请人"
  11. readonly
  12. />
  13. <van-field
  14. v-model="formData.deptName"
  15. name="所在部门"
  16. label="所在部门"
  17. placeholder="所在部门"
  18. readonly
  19. />
  20. <van-field
  21. v-model="formData.applyTime"
  22. name="申请时间"
  23. label="申请时间"
  24. placeholder="申请时间"
  25. readonly
  26. />
  27. <van-field
  28. v-model="formData.useMoneyNo"
  29. name="用款单号"
  30. label="用款单号"
  31. placeholder="用款单号"
  32. readonly
  33. />
  34. <van-field
  35. v-model="formData.paymentCompanyName"
  36. name="付款单位"
  37. label="付款单位"
  38. placeholder="付款单位"
  39. readonly
  40. />
  41. <van-field
  42. v-model="formData.paymentMethod"
  43. name="付款方式"
  44. label="付款方式"
  45. placeholder="付款方式"
  46. readonly
  47. />
  48. <van-field
  49. v-model="formData.agreedPayTime"
  50. name="约定付款期限"
  51. label="约定付款期限"
  52. placeholder="约定付款期限"
  53. readonly
  54. />
  55. <van-field
  56. v-model="formData.collectionCompany"
  57. name="收款单位"
  58. label="收款单位"
  59. placeholder="收款单位"
  60. readonly
  61. />
  62. <van-field
  63. v-model="formData.collectionCompanyBank"
  64. name="收款单位开户行"
  65. label="收款单位开户行"
  66. placeholder="收款单位开户行"
  67. readonly
  68. />
  69. <van-field
  70. v-model="formData.collectionCompanyAccount"
  71. name="收款单位账号"
  72. label="收款单位账号"
  73. placeholder="收款单位账号"
  74. readonly
  75. />
  76. <van-field
  77. v-model="formData.totalAmount"
  78. name="用款总金额(元)"
  79. label="用款总金额(元)"
  80. placeholder="用款总金额(元)"
  81. readonly
  82. />
  83. <van-field
  84. v-model="formData.totalAmountCn"
  85. name="大写用款总金额"
  86. label="大写用款总金额"
  87. placeholder="大写用款总金额"
  88. readonly
  89. />
  90. <van-field
  91. v-model="formData.remark"
  92. name="用款说明"
  93. label="用款说明"
  94. placeholder="用款说明"
  95. type="textarea"
  96. rows="3"
  97. autosize
  98. readonly
  99. />
  100. </van-cell-group>
  101. </van-form>
  102. </card>
  103. <card title="用款详情">
  104. <template #default>
  105. <div v-for="(item,index) in formData.detailList" :key="index">
  106. <van-swipe-cell :disabled="formRead">
  107. <card-cell>
  108. <van-cell title="项目名称" :value="item.projectName" />
  109. <van-cell title="责任部门" :value="item.projectDeptName" />
  110. <van-cell title="金额(元)" :value="item.amount" />
  111. <van-cell title="实际所属类型" :value="item.costTypeName" />
  112. <van-cell title="用途" :value="item.costContent" />
  113. <van-cell title="备注" :value="item.remark" />
  114. </card-cell>
  115. </van-swipe-cell>
  116. </div>
  117. </template>
  118. </card>
  119. </flow-form>
  120. </template>
  121. <script setup lang="ts">
  122. import { useRoute } from 'vue-router';
  123. import { FlowDTO, getNextActivity } from '@/service/flow';
  124. import reqest from "@/utils/request";
  125. import FlowForm from '@/components/flowForm.vue';
  126. import Card from '@/components/card.vue';
  127. import CardCell from '@/components/cardCell.vue';
  128. import moment from 'moment'
  129. const route = useRoute();
  130. interface FormDataType {
  131. instanceId: string
  132. id: string
  133. leaveHours: number | null
  134. userNickname: string
  135. deptName: string
  136. applyTime: string
  137. leaveNo: string
  138. leaveType: number | null
  139. leaveTypeText: string
  140. leaveDays: string
  141. leaveReason: string
  142. detailList: {
  143. projectName: string,
  144. projectDeptName: string,
  145. amount: string,
  146. costTypeName: string,
  147. costContent: string,
  148. remark: string
  149. }[]
  150. }
  151. const formData = ref<FormDataType>({
  152. instanceId: '',
  153. id: '',
  154. leaveHours: null,
  155. userNickname: '',
  156. deptName: '',
  157. applyTime: '',
  158. leaveNo: '',
  159. leaveType: null,
  160. leaveTypeText: '',
  161. leaveDays: '',
  162. leaveReason: '',
  163. detailList: []
  164. })
  165. const formRead = ref(false)
  166. const { activityInstanceId, participant,flowInstanceId,read } = route.query as {
  167. activityInstanceId: string;
  168. participant: string;
  169. flowInstanceId: string;
  170. read: string;
  171. };
  172. const activityData: FlowDTO = {
  173. activityInstanceId,
  174. participantId: participant,
  175. flowOpinion: ''
  176. }
  177. const submitNextActivity = async (NextActivity: () => Promise<any>) => {
  178. NextActivity();
  179. };
  180. const jsonToFormData = (json: any): FormData | null => {
  181. const keys: string[] = Object.keys(json)
  182. if (keys.length > 0) {
  183. const formData = new FormData();
  184. keys.forEach((key) => {
  185. formData.append(key, (json[key] instanceof Object) ? JSON.stringify(json[key]) : json[key]);
  186. });
  187. return formData;
  188. }
  189. return null;
  190. }
  191. /** 初始化表单数据 */
  192. const initFormData= async () => {
  193. const result = await reqest.get(`/business/UseMoney/mobileAdd?flowInstanceId=${flowInstanceId}`)
  194. formData.value = result.data
  195. formData.value.applyTime=formData.value.applyTime?moment(formData.value.applyTime).format('YYYY-MM-DD'):''
  196. formData.value.agreedPayTime=formData.value.agreedPayTime?moment(formData.value.agreedPayTime).format('YYYY-MM-DD'):''
  197. }
  198. /** 初始化 */
  199. onMounted(() => {
  200. initFormData()
  201. if(read==='1'){
  202. formRead.value=true
  203. }
  204. })
  205. </script>
  206. <style lang="scss" scoped>
  207. @import "./index.scss";
  208. </style>