a.html 5.8 KB

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