a.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  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. </style>
  18. <div id="app">
  19. <van-nav-bar @click-left="onClickLeft" style="background-color: rgb(21, 122, 44);color: rgb(255, 255, 255);height:140rpx"
  20. :title="title" left-arrow :safe-area-inset-top='true' :placeholder='true' :fixed='true'></van-nav-bar>
  21. <fm-generate-vant-form v-if='isFlag' :data="jsonData" :value="form.valueJson" ref="generateForm"
  22. :edit='isEdit'>
  23. </fm-generate-vant-form>
  24. <div>
  25. <!-- <van-form>
  26. <van-cell-group inset>
  27. <van-field type="textarea" v-model="form.reason" label="意见" placeholder="" rows="2" autosize
  28. show-word-limit />
  29. </van-cell-group>
  30. </van-form> -->
  31. <div
  32. style="display: flex;justify-content: space-between; padding: 30px 30px; position: fixed; bottom: 0; width: 100%; height: 80px;">
  33. <van-button style="width:48%" type="primary" @click="handleAudit(1)">提交
  34. </van-button>
  35. <van-button style="width:48%" type="danger" @click="onClickLeft">取消
  36. </van-button>
  37. </div>
  38. </div>
  39. </div>
  40. <script src="./resource/vue.global.prod.js"></script>
  41. <script src="./resource/vant.min.js"></script>
  42. <script src="./resource/axios.min.js"></script>
  43. <script src="./resource/uni.webview.js"></script>
  44. <script src="./vue-form-making/form-making-v3.umd.js"></script>
  45. <script>
  46. let EnvObj = {}
  47. uni.getEnv(function(res) {
  48. EnvObj = res;
  49. console.log('当前环境:' + JSON.stringify(res));
  50. });
  51. Vue.createApp({
  52. data() {
  53. return {
  54. isFlag: false,
  55. isEdit: true,
  56. title: '',
  57. jsonData: {},
  58. editData: {},
  59. form: {},
  60. headers: {},
  61. APIUrl: '',
  62. }
  63. },
  64. created() {
  65. this.headers = this.getQueryParams('headers');
  66. let params = this.getQueryParams('params');
  67. this.APIUrl = this.headers.serverInfo
  68. axios({
  69. method: 'get',
  70. url: this.APIUrl + `/flowable/bpmcustomform/getById/${params.id}`,
  71. headers: this.headers,
  72. }).then((res) => {
  73. if (res.data.code != '-1') {
  74. this.form = res.data.data
  75. this.title = this.form.name
  76. this.jsonData = JSON.parse(res.data.data.formJson.makingJson);
  77. this.jsonData.list.forEach(item => {
  78. item.options.headers = [{
  79. key: 'Authorization',
  80. value: this.headers.Authorization
  81. }]
  82. item.options.action = item.options.action && item.options.action.replace(
  83. '/api', this.APIUrl)
  84. if (item.type == "deptAndUserCascader") {
  85. item.type = 'cascader'
  86. }
  87. if (item.type == "deptCascader") {
  88. item.type = 'cascader'
  89. }
  90. if (item.type == "userSelect") {
  91. item.type = 'select'
  92. }
  93. })
  94. this.jsonData.config.dataSource && this.jsonData.config.dataSource.forEach(item => {
  95. item.headers = {
  96. Authorization: this.headers.Authorization
  97. }
  98. item.url = item.url && item.url.replace('/api', this.APIUrl)
  99. })
  100. this.isFlag = true
  101. }
  102. });
  103. axios({
  104. method: 'get',
  105. url: this.APIUrl + `/bpm/task/list-by-process-instance-id?processInstanceId=${params.id}`,
  106. headers: this.headers,
  107. }).then((res) => {
  108. console.log(res)
  109. if (res.data.code != '-1') {
  110. }
  111. });
  112. },
  113. methods: {
  114. getQueryParams(queryName) {
  115. const urlSearchParams = new URLSearchParams(window.location.search);
  116. const query = urlSearchParams.get(queryName);
  117. return JSON.parse(query);
  118. },
  119. generateFormValid(validate = true) {
  120. return this.$refs.generateForm.getData(validate).then((data) => {
  121. return data;
  122. });
  123. },
  124. async handleAudit(status) {
  125. this.form.valueJson = await this.generateFormValid();
  126. console.log(this.form.valueJson)
  127. this.form.processType = '1';
  128. let API = this.APIUrl + '/bpm/process-instance/create'
  129. axios({
  130. method: 'post',
  131. url: API,
  132. headers: this.headers,
  133. data: {
  134. ...this.form,
  135. }
  136. }).then((res) => {
  137. if (res.data.code != '-1') {
  138. vant.showNotify({
  139. type: 'success',
  140. message: `提交成功!`,
  141. duration: 1000,
  142. });
  143. setTimeout(() => {
  144. this.onClickLeft()
  145. }, 1000)
  146. }
  147. });
  148. },
  149. onClickLeft() {
  150. uni.navigateBack({
  151. delta: 1
  152. });
  153. }
  154. }
  155. }).use(vant).use(FormMakingV3).mount('#app')
  156. </script>
  157. </body>
  158. </html>