c.html 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  7. <link rel="stylesheet" href="./resource/vantIndex.css" />
  8. <link rel="stylesheet" href="./vue-form-making/index.css">
  9. </head>
  10. <body>
  11. <style>
  12. :root:root {
  13. --van-nav-bar-background: rgb(21, 122, 44);
  14. --van-nav-bar-title-text-color: rgb(255, 255, 255);
  15. --van-nav-bar-icon-color: rgb(255, 255, 255);
  16. }
  17. .blank_adopzrdd {
  18. display: flex;
  19. align-items: center;
  20. margin-bottom: 10px;
  21. }
  22. .blank_adopzrdd >span {
  23. display: inline-block;
  24. width: 80px;
  25. }
  26. .van-nav-bar--fixed {
  27. top: 44px;
  28. }
  29. </style>
  30. <div id="app">
  31. <van-nav-bar height='100rpx' @click-left="onClickLeft"
  32. style="background-color: rgb(21, 122, 44);color: rgb(255, 255, 255);" :title="title" left-arrow
  33. :safe-area-inset-top='true' :placeholder='true' :fixed='true'></van-nav-bar>
  34. <fm-generate-vant-form style='height: 75vh !important;overflow: auto;margin-top:44px' v-if='isFlag'
  35. :data="jsonData" :value="form.valueJson" ref="generateForm" :edit='false' @on-upload-local="handleUploadLocal">
  36. <template v-slot:blank_adopzrdd="scope">
  37. <div style="width: 100%;">
  38. <div v-for="(item, index) in scope.model.blank_adopzrdd" :key="index" style="width: 100%;">
  39. <div class="blank_adopzrdd">
  40. <span>{{ index + 1 }}报销事项:</span>
  41. <van-field rows="1" v-model="scope.model.blank_adopzrdd[index].remark" type="textarea"
  42. autosize style="width: calc(100% - 80px)"></van-field>
  43. </div>
  44. <div class="blank_adopzrdd">
  45. <span>
  46. 金额:</span>
  47. <van-field v-model="scope.model.blank_adopzrdd[index].price" type="number"
  48. style="width: calc(100% - 80px)"></van-field>
  49. </div>
  50. </div>
  51. </div>
  52. </template>
  53. </fm-generate-vant-form>
  54. <div v-if="type!='view'" style='position: fixed; bottom: 0;background: #f9fafb;width:100%;height:20%'>
  55. <van-form label-width='30px'>
  56. <van-cell-group inset>
  57. <van-field style="background: #f9fafb;" type="textarea" v-model="form.reason" label="意见"
  58. placeholder="" rows="2" :autosize='{maxHeight: 50}' show-word-limit />
  59. </van-cell-group>
  60. </van-form>
  61. <div
  62. style="display: flex;justify-content: space-between; padding: 0px 30px; width: 100%; height: 80px;">
  63. <van-button style="width:48%" type="primary" :loading="loading" @click="handleAudit(1)">通过
  64. </van-button>
  65. <van-button style="width:48%" type="danger" :loading="loading" @click="handleAudit(0)">驳回
  66. </van-button>
  67. </div>
  68. </div>
  69. </div>
  70. <script src="./resource/vue.global.prod.js"></script>
  71. <script src="./resource/vant.min.js"></script>
  72. <script src="./resource/axios.min.js"></script>
  73. <script src="./resource/uni.webview.js"></script>
  74. <script src="./vue-form-making/form-making-v3.umd.js"></script>
  75. <script>
  76. let EnvObj = {}
  77. uni.getEnv(function(res) {
  78. EnvObj = res;
  79. console.log('当前环境:' + JSON.stringify(res));
  80. });
  81. Vue.createApp({
  82. data() {
  83. return {
  84. isFlag: false,
  85. isEdit: true,
  86. type: '',
  87. jsonData: {},
  88. editData: {},
  89. form: {},
  90. headers: {},
  91. APIUrl: '',
  92. title: '',
  93. type: 'view',
  94. }
  95. },
  96. created() {
  97. this.headers = this.getQueryParams('headers');
  98. let params = this.getQueryParams('params');
  99. this.APIUrl = this.headers.serverInfo || 'http://192.168.1.105:18086'
  100. this.title = params.type == 'view' ? '查看' : '审核'
  101. this.type = params.type || 'view'
  102. axios({
  103. method: 'get',
  104. url: this.APIUrl + `/bpm/process-instance/get?id=${params.processInstanceId}`,
  105. headers: this.headers,
  106. }).then((res) => {
  107. console.log(res)
  108. if (res.data.code != '-1') {
  109. this.form = res.data.data
  110. this.form.submitId = params.id
  111. this.jsonData = JSON.parse(res.data.data.formJson.makingJson);
  112. this.jsonData.list.forEach(item => {
  113. item.options.headers = [{
  114. key: 'Authorization',
  115. value: this.headers.Authorization
  116. }]
  117. if (item.type == "deptAndUserCascader") {
  118. item.type = 'cascader'
  119. }
  120. if (item.type == "deptCascader") {
  121. item.type = 'cascader'
  122. }
  123. if (item.type == "userSelect") {
  124. item.type = 'select'
  125. }
  126. if (item.type == "imgupload") {
  127. this.form.valueJson[item.model].length && this.form.valueJson[item
  128. .model].forEach(
  129. item => {
  130. //item.objectUrl = this.APIUrl +'/kd-aiot' + item.storePath
  131. item.objectUrl = item.url
  132. })
  133. }
  134. })
  135. this.jsonData.config.dataSource && this.jsonData.config.dataSource.forEach(item => {
  136. item.headers = {
  137. Authorization: this.headers.Authorization
  138. }
  139. item.url = item.url && item.url.replace('/api', this.APIUrl)
  140. })
  141. this.isFlag = true
  142. }
  143. });
  144. },
  145. methods: {
  146. async handleUploadLocal (model) {
  147. console.log('上传本地文件按钮被点击,字段模型:', model, this.type)
  148. let data = await this.$refs.generateForm.getData(false);
  149. // 在这里处理上传本地文件的逻辑
  150. uni.postMessage({
  151. data: {
  152. type: 'selectFiles',
  153. field: model,
  154. files: data[model],
  155. isEdit: 'view'
  156. }
  157. });
  158. },
  159. getQueryParams(queryName) {
  160. const urlSearchParams = new URLSearchParams(window.location.search);
  161. const query = urlSearchParams.get(queryName);
  162. return JSON.parse(query);
  163. },
  164. async handleAudit(status) {
  165. await this._approveTaskWithVariables(status);
  166. },
  167. async _approveTaskWithVariables(status) {
  168. this.loading = true;
  169. let variables = {
  170. pass: !!status,
  171. ...this.form.formVariables
  172. };
  173. if (!this.form.reason) this.form.reason = !!status ? '通过' : '驳回'
  174. let API = !!status ? this.APIUrl + '/bpm/task/approveTaskWithVariables' :
  175. this.APIUrl + '/bpm/task/reject'
  176. axios({
  177. method: 'put',
  178. url: API,
  179. headers: this.headers,
  180. data: {
  181. id: this.form.submitId,
  182. reason: this.form.reason,
  183. variables
  184. }
  185. }).then((res) => {
  186. this.loading = false;
  187. if (res.data.code != '-1') {
  188. let params = {
  189. status,
  190. title: status === 0 ? '驳回' : ''
  191. }
  192. vant.showNotify({
  193. type: 'success',
  194. message: `审批${params.title}成功!`,
  195. duration: 1000,
  196. });
  197. setTimeout(() => {
  198. this.onClickLeft()
  199. }, 1000)
  200. }
  201. }).catch(() => {
  202. this.loading = false;
  203. });
  204. },
  205. onClickLeft() {
  206. uni.navigateBack({
  207. delta: 1
  208. });
  209. }
  210. }
  211. }).use(vant).use(FormMakingV3).mount('#app')
  212. </script>
  213. </body>
  214. </html>