c.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411
  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. .seal-card { background: #fff; border-radius: 8px; margin-bottom: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
  30. .seal-card-header { display: flex; align-items: center; padding: 10px 12px; background: #f7f8fa; border-bottom: 1px solid #ebedf0; }
  31. .seal-card-index { font-size: 14px; font-weight: bold; color: #157A2C; margin-right: 8px; }
  32. .seal-card-type { flex: 1; font-size: 15px; font-weight: bold; color: #323233; }
  33. .seal-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
  34. .seal-card-body { padding: 8px 12px; }
  35. .seal-card-row { display: flex; padding: 6px 0; font-size: 13px; }
  36. .seal-card-label { width: 42px; color: #969799; flex-shrink: 0; }
  37. .seal-card-value { flex: 1; color: #323233; word-break: break-all; }
  38. </style>
  39. <div id="app">
  40. <van-nav-bar height='100rpx' @click-left="onClickLeft"
  41. style="background-color: rgb(21, 122, 44);color: rgb(255, 255, 255);" :title="title" left-arrow
  42. :safe-area-inset-top='true' :placeholder='true' :fixed='true'></van-nav-bar>
  43. <fm-generate-vant-form style='height: 75vh !important;overflow: auto;margin-top:44px' v-if='isFlag'
  44. :data="jsonData" :value="form.valueJson" ref="generateForm" :edit='false' @on-upload-local="handleUploadLocal">
  45. <template v-slot:blank_adopzrdd="scope">
  46. <div style="width: 100%;">
  47. <div v-for="(item, index) in scope.model.blank_adopzrdd" :key="index" style="width: 100%;">
  48. <div class="blank_adopzrdd">
  49. <span>{{ index + 1 }}报销事项:</span>
  50. <van-field rows="1" v-model="scope.model.blank_adopzrdd[index].remark" type="textarea"
  51. autosize style="width: calc(100% - 80px)"></van-field>
  52. </div>
  53. <div class="blank_adopzrdd">
  54. <span>
  55. 金额:</span>
  56. <van-field v-model="scope.model.blank_adopzrdd[index].price" type="number"
  57. style="width: calc(100% - 80px)"></van-field>
  58. </div>
  59. <div class="blank_adopzrdd">
  60. <span>
  61. <van-icon @click="delNewRow('blank_adopzrdd', index)" name="delete"
  62. style="color: #f56c6c;"></van-icon>
  63. 附件:</span>
  64. <template v-if="item.files && item.files.length">
  65. <van-badge :content="item.files.length">
  66. <van-button type="primary" size="mini" @click="handleUploadLocal('blank_adopzrdd', index)">查看附件</van-button>
  67. </van-badge>
  68. </template>
  69. <!-- <van-button v-else type="primary" size="mini" @click="handleUploadLocal('blank_adopzrdd', index)">上传附件</van-button> -->
  70. </div>
  71. </div>
  72. </div>
  73. </template>
  74. <template v-slot:blank_use_seal="scope">
  75. <div style="width: 100%;">
  76. <!-- 列表项 -->
  77. <view v-for="(item, index) in scope.model.blank_use_seal" :key="index" class="seal-card">
  78. <div class="seal-card-header">
  79. <span class="seal-card-index">{{ index + 1 }}.</span>
  80. <span class="seal-card-type">{{ item.useSealType || '未选择类型' }}</span>
  81. <!-- <div class="seal-card-actions">
  82. <van-button size="mini" type="primary" plain @click="openSealEditDialog(scope, 'edit', index)">编辑</van-button>
  83. <van-button size="mini" type="danger" plain @click="delNewRow('blank_use_seal', index)">删除</van-button>
  84. </div> -->
  85. </div>
  86. <div class="seal-card-body">
  87. <div class="seal-card-row">
  88. <span class="seal-card-label">事由</span>
  89. <span class="seal-card-value">{{ item.useSealRemark || '未填写' }}</span>
  90. </div>
  91. <div class="seal-card-row">
  92. <span class="seal-card-label">印章</span>
  93. <span class="seal-card-value">{{ item.useSealName || '未选择' }}</span>
  94. </div>
  95. </div>
  96. </view>
  97. <!-- <van-button type="primary" size="small" block @click="openSealEditDialog(scope, 'add', scope.model.blank_use_seal?scope.model.blank_use_seal.length:0)" style="margin-bottom:10px">+ 添加印章使用</van-button> -->
  98. </div>
  99. </template>
  100. <template v-slot:blank_use_qualification="scope">
  101. <div style="width: 100%;">
  102. <view v-for="(item, index) in scope.model.blank_use_qualification" :key="index" class="seal-card">
  103. <div class="seal-card-header">
  104. <span class="seal-card-index">{{ index + 1 }}.</span>
  105. <span class="seal-card-type">{{ item.useQualificationType || '未选择类型' }}</span>
  106. <!-- <div class="seal-card-actions">
  107. <van-button size="mini" type="primary" plain @click="openQualEditDialog(scope, 'edit', index)">编辑</van-button>
  108. <van-button size="mini" type="danger" plain @click="delNewRow('blank_use_qualification', index)">删除</van-button>
  109. </div> -->
  110. </div>
  111. <div class="seal-card-body">
  112. <div class="seal-card-row">
  113. <span class="seal-card-label">事由</span>
  114. <span class="seal-card-value">{{ item.useQualificationRemark || '未填写' }}</span>
  115. </div>
  116. <div class="seal-card-row">
  117. <span class="seal-card-label">名称</span>
  118. <span class="seal-card-value">{{ item.useQualificationName || '未选择' }}</span>
  119. </div>
  120. </div>
  121. </view>
  122. <!-- <van-button type="primary" size="small" block @click="openQualEditDialog(scope, 'add', scope.model.blank_use_qualification?scope.model.blank_use_qualification.length:0)" style="margin-bottom:10px">+ 添加资质使用</van-button> -->
  123. </div>
  124. </template>
  125. <template v-slot:blank_application_component="scope">
  126. <div style="width: 100%;">
  127. <view v-for="(item, index) in scope.model.blank_application_component" :key="index" class="seal-card">
  128. <div class="seal-card-header">
  129. <span class="seal-card-index">{{ index + 1 }}.</span>
  130. <span class="seal-card-type">{{ item.productName || '未选择产品' }}</span>
  131. <!-- <div class="seal-card-actions">
  132. <van-button size="mini" type="primary" plain @click="openAppEditDialog(scope, 'edit', index)">编辑</van-button>
  133. <van-button size="mini" type="danger" plain @click="delNewRow('blank_application_component', index)">删除</van-button>
  134. </div> -->
  135. </div>
  136. <div class="seal-card-body">
  137. <div class="seal-card-row">
  138. <span class="seal-card-label">数量</span>
  139. <span class="seal-card-value">{{ item.quantity || '未填写' }}</span>
  140. </div>
  141. <div class="seal-card-row">
  142. <span class="seal-card-label">规格</span>
  143. <span class="seal-card-value">{{ item.specification || '未填写' }}</span>
  144. </div>
  145. </div>
  146. </view>
  147. <!-- <van-button type="primary" size="small" block @click="openAppEditDialog(scope, 'add', scope.model.blank_application_component?scope.model.blank_application_component.length:0)" style="margin-bottom:10px">+ 添加产品</van-button> -->
  148. </div>
  149. </template>
  150. <template v-slot:blank_business_trip="scope">
  151. <div style="width: 100%;">
  152. <view v-for="(item, index) in scope.model.blank_business_trip" :key="index" class="seal-card">
  153. <div class="seal-card-header">
  154. <span class="seal-card-index">{{ index + 1 }}.</span>
  155. <span class="seal-card-type">{{ item.transportation || '未知交通' }} {{ item.departureCity || '?' }}→{{ item.destinationCity || '?' }}</span>
  156. <!-- <div class="seal-card-actions">
  157. <van-button size="mini" type="primary" plain @click="openTripEditDialog(scope, 'edit', index)">编辑</van-button>
  158. <van-button size="mini" type="danger" plain @click="delNewRow('blank_business_trip', index);calcTripTotal(scope)">删除</van-button>
  159. </div> -->
  160. </div>
  161. <div class="seal-card-body">
  162. <div class="seal-card-row">
  163. <span class="seal-card-label">往返</span>
  164. <span class="seal-card-value">{{ item.isRoundTrip || '未填写' }}</span>
  165. </div>
  166. <div class="seal-card-row">
  167. <span class="seal-card-label">时间</span>
  168. <span class="seal-card-value">{{ item.startTime || '-' }} ~ {{ item.endTime || '-' }}</span>
  169. </div>
  170. <div class="seal-card-row">
  171. <span class="seal-card-label">时长</span>
  172. <span class="seal-card-value">{{ item.duration || '-' }}</span>
  173. </div>
  174. </div>
  175. </view>
  176. <!-- <van-button type="primary" size="small" block @click="openTripEditDialog(scope, 'add', scope.model.blank_business_trip?scope.model.blank_business_trip.length:0)" style="margin-bottom:10px">+ 添加行程</van-button> -->
  177. </div>
  178. </template>
  179. <template v-slot:blank_purchase_requisition="scope">
  180. <div style="width: 100%;">
  181. <view v-for="(item, index) in scope.model.blank_purchase_requisition" :key="index" class="seal-card">
  182. <div class="seal-card-header">
  183. <span class="seal-card-index">{{ index + 1 }}.</span>
  184. <span class="seal-card-type">{{ item.materialName || '未填写物料' }} ×{{ item.quantity||0 }}{{ item.unit||'' }}</span>
  185. <!-- <div class="seal-card-actions">
  186. <van-button size="mini" type="primary" plain @click="openPrEditDialog(scope, 'edit', index)">编辑</van-button>
  187. <van-button size="mini" type="danger" plain @click="delNewRow('blank_purchase_requisition', index)">删除</van-button>
  188. </div> -->
  189. </div>
  190. <div class="seal-card-body">
  191. <div class="seal-card-row">
  192. <span class="seal-card-label">规格</span>
  193. <span class="seal-card-value">{{ item.specification || '-' }}</span>
  194. </div>
  195. <div class="seal-card-row">
  196. <span class="seal-card-label">用途</span>
  197. <span class="seal-card-value">{{ item.purpose || '-' }}</span>
  198. </div>
  199. <div class="seal-card-row">
  200. <span class="seal-card-label">交付</span>
  201. <span class="seal-card-value">{{ item.expectedDeliveryDate || '-' }}</span>
  202. </div>
  203. <div class="seal-card-row" v-if="item.remark">
  204. <span class="seal-card-label">备注</span>
  205. <span class="seal-card-value">{{ item.remark }}</span>
  206. </div>
  207. </div>
  208. </view>
  209. <!-- <van-button type="primary" size="small" block @click="openPrEditDialog(scope, 'add', scope.model.blank_purchase_requisition?scope.model.blank_purchase_requisition.length:0)" style="margin-bottom:10px">+ 添加物料</van-button> -->
  210. </div>
  211. </template>
  212. </fm-generate-vant-form>
  213. <div v-if="type!='view'" style='position: fixed; bottom: 0;background: #f9fafb;width:100%;height:20%'>
  214. <van-form label-width='30px'>
  215. <van-cell-group inset>
  216. <van-field style="background: #f9fafb;" type="textarea" v-model="form.reason" label="意见"
  217. placeholder="" rows="2" :autosize='{maxHeight: 50}' show-word-limit />
  218. </van-cell-group>
  219. </van-form>
  220. <div
  221. style="display: flex;justify-content: space-between; padding: 0px 30px; width: 100%; height: 80px;">
  222. <van-button style="width:48%" type="primary" :loading="loading" @click="handleAudit(1)">通过
  223. </van-button>
  224. <van-button style="width:48%" type="danger" :loading="loading" @click="handleAudit(0)">驳回
  225. </van-button>
  226. </div>
  227. </div>
  228. </div>
  229. <script src="./resource/vue.global.prod.js"></script>
  230. <script src="./resource/vant.min.js"></script>
  231. <script src="./resource/axios.min.js"></script>
  232. <script src="./resource/uni.webview.js"></script>
  233. <script src="./vue-form-making/form-making-v3.umd.js"></script>
  234. <script>
  235. let EnvObj = {}
  236. uni.getEnv(function(res) {
  237. EnvObj = res;
  238. console.log('当前环境:' + JSON.stringify(res));
  239. });
  240. Vue.createApp({
  241. data() {
  242. return {
  243. isFlag: false,
  244. isEdit: true,
  245. type: '',
  246. jsonData: {},
  247. editData: {},
  248. form: {},
  249. headers: {},
  250. APIUrl: '',
  251. title: '',
  252. type: 'view',
  253. selectFilesField: null,
  254. selectFilesRowIndex: null,
  255. }
  256. },
  257. created() {
  258. let _this = this
  259. window.x_selectFiles = async (e) => {
  260. let data = JSON.parse(e)
  261. if (_this.$refs.generateForm) {
  262. if (_this.selectFilesRowIndex != null && _this.selectFilesField) {
  263. let formData = await _this.$refs.generateForm.getData(false);
  264. var arr = formData[_this.selectFilesField] || []
  265. var row = arr[_this.selectFilesRowIndex]
  266. if (row) {
  267. row.files = data.files || []
  268. _this.$refs.generateForm.setData({ [_this.selectFilesField]: arr })
  269. }
  270. _this.selectFilesRowIndex = null
  271. } else {
  272. _this.$refs.generateForm.setData({ [data.field]: data.files })
  273. }
  274. }
  275. }
  276. this.headers = this.getQueryParams('headers');
  277. let params = this.getQueryParams('params');
  278. this.APIUrl = this.headers.serverInfo || 'http://192.168.1.105:18086'
  279. this.title = params.type == 'view' ? '查看' : '审核'
  280. this.type = params.type || 'view'
  281. axios({
  282. method: 'get',
  283. url: this.APIUrl + `/bpm/process-instance/get?id=${params.processInstanceId}`,
  284. headers: this.headers,
  285. }).then((res) => {
  286. console.log(res)
  287. if (res.data.code != '-1') {
  288. this.form = res.data.data
  289. this.form.submitId = params.id
  290. this.jsonData = JSON.parse(res.data.data.formJson.makingJson);
  291. this.jsonData.list.forEach(item => {
  292. item.options.headers = [{
  293. key: 'Authorization',
  294. value: this.headers.Authorization
  295. }]
  296. if (item.type == "deptAndUserCascader") {
  297. item.type = 'cascader'
  298. }
  299. if (item.type == "deptCascader") {
  300. item.type = 'cascader'
  301. }
  302. if (item.type == "userSelect") {
  303. item.type = 'select'
  304. }
  305. if (item.type == "imgupload") {
  306. this.form.valueJson[item.model].length && this.form.valueJson[item
  307. .model].forEach(
  308. item => {
  309. //item.objectUrl = this.APIUrl +'/kd-aiot' + item.storePath
  310. item.objectUrl = item.url
  311. })
  312. }
  313. })
  314. this.jsonData.config.dataSource && this.jsonData.config.dataSource.forEach(item => {
  315. item.headers = {
  316. Authorization: this.headers.Authorization
  317. }
  318. item.url = item.url && item.url.replace('/api', this.APIUrl)
  319. })
  320. this.isFlag = true
  321. }
  322. });
  323. },
  324. methods: {
  325. async handleUploadLocal (model, rowIndex) {
  326. console.log('上传本地文件按钮被点击,字段模型:', model, '行索引:', rowIndex)
  327. let data = await this.$refs.generateForm.getData(false);
  328. let files = rowIndex != null && data[model] && data[model][rowIndex] ? (data[model][rowIndex].files || []) : (data[model] || [])
  329. this.selectFilesField = model
  330. this.selectFilesRowIndex = rowIndex != null ? rowIndex : null
  331. uni.postMessage({
  332. data: {
  333. type: 'selectFiles',
  334. field: model,
  335. files: files,
  336. isEdit: 'view'
  337. }
  338. });
  339. },
  340. getQueryParams(queryName) {
  341. const urlSearchParams = new URLSearchParams(window.location.search);
  342. const query = urlSearchParams.get(queryName);
  343. return JSON.parse(query);
  344. },
  345. async handleAudit(status) {
  346. await this._approveTaskWithVariables(status);
  347. },
  348. async _approveTaskWithVariables(status) {
  349. this.loading = true;
  350. let variables = {
  351. pass: !!status,
  352. ...this.form.formVariables
  353. };
  354. if (!this.form.reason) this.form.reason = !!status ? '通过' : '驳回'
  355. let API = !!status ? this.APIUrl + '/bpm/task/approveTaskWithVariables' :
  356. this.APIUrl + '/bpm/task/reject'
  357. axios({
  358. method: 'put',
  359. url: API,
  360. headers: this.headers,
  361. data: {
  362. id: this.form.submitId,
  363. reason: this.form.reason,
  364. variables
  365. }
  366. }).then((res) => {
  367. this.loading = false;
  368. if (res.data.code != '-1') {
  369. let params = {
  370. status,
  371. title: status === 0 ? '驳回' : ''
  372. }
  373. vant.showNotify({
  374. type: 'success',
  375. message: `审批${params.title}成功!`,
  376. duration: 1000,
  377. });
  378. setTimeout(() => {
  379. this.onClickLeft()
  380. }, 1000)
  381. }
  382. }).catch(() => {
  383. this.loading = false;
  384. });
  385. },
  386. onClickLeft() {
  387. uni.navigateBack({
  388. delta: 1
  389. });
  390. }
  391. }
  392. }).use(vant).use(FormMakingV3).mount('#app')
  393. </script>
  394. </body>
  395. </html>