a.html 39 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010
  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. .seal-form-row {
  27. display: flex; align-items: center; padding: 10px 16px;
  28. border-bottom: 1px solid #ebedf0; background: #fff;
  29. }
  30. .seal-form-label { width: 100px; font-size: 14px; color: #646566; flex-shrink: 0; }
  31. .seal-form-val { flex: 1; font-size: 14px; color: #333; text-align: right; }
  32. .seal-form-arrow { font-size: 20px; color: #c8c9cc; margin-left: 8px; }
  33. .seal-form-input { flex: 1; border: none; font-size: 14px; text-align: right; outline: none; background: transparent; }
  34. .seal-card { background: #fff; border-radius: 8px; margin-bottom: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
  35. .seal-card-header { display: flex; align-items: center; padding: 10px 12px; background: #f7f8fa; border-bottom: 1px solid #ebedf0; }
  36. .seal-card-index { font-size: 14px; font-weight: bold; color: #157A2C; margin-right: 8px; }
  37. .seal-card-type { flex: 1; font-size: 15px; font-weight: bold; color: #323233; }
  38. .seal-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
  39. .seal-card-body { padding: 8px 12px; }
  40. .seal-card-row { display: flex; padding: 6px 0; font-size: 13px; }
  41. .seal-card-label { width: 42px; color: #969799; flex-shrink: 0; }
  42. .seal-card-value { flex: 1; color: #323233; word-break: break-all; }
  43. :root#app {
  44. background: #4298fd0d;
  45. }
  46. ::v-deep.fm-form-item {
  47. margin-bottom: 10px !important;
  48. }
  49. </style>
  50. <div id="app">
  51. <van-nav-bar height='100rpx;margin-top:100rpx' @click-left="onClickLeft"
  52. style="background-color: rgb(21, 122, 44);color: rgb(255, 255, 255);" :title="title" left-arrow
  53. :safe-area-inset-top='true' :placeholder='true' :fixed='true'></van-nav-bar>
  54. <fm-generate-vant-form style='height: 81vh !important;overflow: auto;background: #a3a6ad1c;margin-top:44px'
  55. v-if='isFlag' :data="jsonData" :value="form.valueJson" ref="generateForm" :edit='isEdit' @on-upload-local="handleUploadLocal">
  56. <!-- 费用报销 -->
  57. <template v-slot:blank_adopzrdd="scope">
  58. <div style="width: 100%;">
  59. <van-button type="primary" size="small" @click="addNewRow('blank_adopzrdd')"
  60. style="margin-bottom: 10px">添加报销事项</van-button>
  61. <div v-for="(item, index) in scope.model.blank_adopzrdd" :key="index" style="width: 100%;">
  62. <div class="blank_adopzrdd">
  63. <span>{{ index + 1 }}报销事项:</span>
  64. <van-field rows="1" v-model="scope.model.blank_adopzrdd[index].remark" type="textarea"
  65. autosize style="width: calc(100% - 80px)"></van-field>
  66. </div>
  67. <div class="blank_adopzrdd">
  68. <span>
  69. <!-- <van-icon @click="delNewRow('blank_adopzrdd', index)" name="delete"
  70. style="color: #f56c6c;"></van-icon> -->
  71. 金额:</span>
  72. <van-field v-model="scope.model.blank_adopzrdd[index].price" type="number"
  73. style="width: calc(100% - 80px)"
  74. @change="changePrice(scope.model.blank_adopzrdd)"></van-field>
  75. </div>
  76. <div class="blank_adopzrdd">
  77. <span>
  78. <van-icon @click="delNewRow('blank_adopzrdd', index, true)" name="delete"
  79. style="color: #f56c6c;"></van-icon>
  80. 附件:</span>
  81. <template v-if="item.files && item.files.length">
  82. <van-badge :content="item.files.length">
  83. <van-button type="primary" size="mini" @click="handleUploadLocal('blank_adopzrdd', index)">上传附件</van-button>
  84. </van-badge>
  85. </template>
  86. <van-button v-else type="primary" size="mini" @click="handleUploadLocal('blank_adopzrdd', index)">上传附件</van-button>
  87. </div>
  88. </div>
  89. </div>
  90. </template>
  91. <template v-slot:manage_workorder="scope">
  92. <van-field v-model="scope.model.manage_workorder.code" readonly @click="addWorkOrder()"></van-field>
  93. </template>
  94. <template v-slot:blank_use_seal="scope">
  95. <div style="width: 100%;">
  96. <!-- 列表项 -->
  97. <view v-for="(item, index) in scope.model.blank_use_seal" :key="index" class="seal-card">
  98. <div class="seal-card-header">
  99. <span class="seal-card-index">{{ index + 1 }}.</span>
  100. <span class="seal-card-type">{{ item.useSealType || '未选择类型' }}</span>
  101. <div class="seal-card-actions">
  102. <van-button size="mini" type="primary" plain @click="openSealEditDialog(scope, 'edit', index)">编辑</van-button>
  103. <van-button size="mini" type="danger" plain @click="delNewRow('blank_use_seal', index)">删除</van-button>
  104. </div>
  105. </div>
  106. <div class="seal-card-body">
  107. <div class="seal-card-row">
  108. <span class="seal-card-label">事由</span>
  109. <span class="seal-card-value">{{ item.useSealRemark || '未填写' }}</span>
  110. </div>
  111. <div class="seal-card-row">
  112. <span class="seal-card-label">印章</span>
  113. <span class="seal-card-value">{{ item.useSealName || '未选择' }}</span>
  114. </div>
  115. </div>
  116. </view>
  117. <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>
  118. </div>
  119. </template>
  120. <template v-slot:blank_use_qualification="scope">
  121. <div style="width: 100%;">
  122. <view v-for="(item, index) in scope.model.blank_use_qualification" :key="index" class="seal-card">
  123. <div class="seal-card-header">
  124. <span class="seal-card-index">{{ index + 1 }}.</span>
  125. <span class="seal-card-type">{{ item.useQualificationType || '未选择类型' }}</span>
  126. <div class="seal-card-actions">
  127. <van-button size="mini" type="primary" plain @click="openQualEditDialog(scope, 'edit', index)">编辑</van-button>
  128. <van-button size="mini" type="danger" plain @click="delNewRow('blank_use_qualification', index)">删除</van-button>
  129. </div>
  130. </div>
  131. <div class="seal-card-body">
  132. <div class="seal-card-row">
  133. <span class="seal-card-label">事由</span>
  134. <span class="seal-card-value">{{ item.useQualificationRemark || '未填写' }}</span>
  135. </div>
  136. <div class="seal-card-row">
  137. <span class="seal-card-label">名称</span>
  138. <span class="seal-card-value">{{ item.useQualificationName || '未选择' }}</span>
  139. </div>
  140. </div>
  141. </view>
  142. <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>
  143. </div>
  144. </template>
  145. <template v-slot:blank_application_component="scope">
  146. <div style="width: 100%;">
  147. <view v-for="(item, index) in scope.model.blank_application_component" :key="index" class="seal-card">
  148. <div class="seal-card-header">
  149. <span class="seal-card-index">{{ index + 1 }}.</span>
  150. <span class="seal-card-type">{{ item.productName || '未选择产品' }}</span>
  151. <div class="seal-card-actions">
  152. <van-button size="mini" type="primary" plain @click="openAppEditDialog(scope, 'edit', index)">编辑</van-button>
  153. <van-button size="mini" type="danger" plain @click="delNewRow('blank_application_component', index)">删除</van-button>
  154. </div>
  155. </div>
  156. <div class="seal-card-body">
  157. <div class="seal-card-row">
  158. <span class="seal-card-label">数量</span>
  159. <span class="seal-card-value">{{ item.quantity || '未填写' }}</span>
  160. </div>
  161. <div class="seal-card-row">
  162. <span class="seal-card-label">规格</span>
  163. <span class="seal-card-value">{{ item.specification || '未填写' }}</span>
  164. </div>
  165. </div>
  166. </view>
  167. <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>
  168. </div>
  169. </template>
  170. <template v-slot:blank_business_trip="scope">
  171. <div style="width: 100%;">
  172. <view v-for="(item, index) in scope.model.blank_business_trip" :key="index" class="seal-card">
  173. <div class="seal-card-header">
  174. <span class="seal-card-index">{{ index + 1 }}.</span>
  175. <span class="seal-card-type">{{ item.transportation || '未知交通' }} {{ item.departureCity || '?' }}→{{ item.destinationCity || '?' }}</span>
  176. <div class="seal-card-actions">
  177. <van-button size="mini" type="primary" plain @click="openTripEditDialog(scope, 'edit', index)">编辑</van-button>
  178. <van-button size="mini" type="danger" plain @click="delNewRow('blank_business_trip', index);calcTripTotal(scope)">删除</van-button>
  179. </div>
  180. </div>
  181. <div class="seal-card-body">
  182. <div class="seal-card-row">
  183. <span class="seal-card-label">往返</span>
  184. <span class="seal-card-value">{{ item.isRoundTrip || '未填写' }}</span>
  185. </div>
  186. <div class="seal-card-row">
  187. <span class="seal-card-label">时间</span>
  188. <span class="seal-card-value">{{ item.startTime || '-' }} ~ {{ item.endTime || '-' }}</span>
  189. </div>
  190. <div class="seal-card-row">
  191. <span class="seal-card-label">时长</span>
  192. <span class="seal-card-value">{{ item.duration || '-' }}</span>
  193. </div>
  194. </div>
  195. </view>
  196. <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>
  197. </div>
  198. </template>
  199. </fm-generate-vant-form>
  200. <!-- 印章选择弹窗(根层级,避免被 form overflow 裁剪) -->
  201. <van-popup v-model:show="sealPopVisible" position="bottom" :style="{ height: '30%' }" teleport="body">
  202. <van-picker
  203. show-toolbar
  204. :title="sealPopType === 'type' ? '印章使用类型' : '印章名称'"
  205. :columns="sealPopType === 'type' ? useSealTypeList : useSealNameList"
  206. @confirm="onSealPopConfirm"
  207. @cancel="sealPopVisible = false"
  208. />
  209. </van-popup>
  210. <!-- 印章编辑弹窗 -->
  211. <van-popup v-model:show="sealEditVisible" position="bottom" :style="{ height: '55%' }" round>
  212. <div style="padding:16px">
  213. <h4 style="text-align:center;margin-bottom:12px">{{ sealEditTitle }}</h4>
  214. <!-- 印章使用类型 -->
  215. <div class="seal-form-row" @click="openSealPickerInEdit('type')">
  216. <span class="seal-form-label">印章使用类型</span>
  217. <span class="seal-form-val">{{ sealEditForm.useSealType || '请选择' }}</span>
  218. <span class="seal-form-arrow">›</span>
  219. </div>
  220. <!-- 印章使用事由 -->
  221. <div class="seal-form-row">
  222. <span class="seal-form-label">印章使用事由</span>
  223. <input class="seal-form-input" v-model="sealEditForm.useSealRemark" placeholder="请输入" />
  224. </div>
  225. <!-- 印章名称 -->
  226. <div class="seal-form-row" @click="openSealPickerInEdit('name')">
  227. <span class="seal-form-label">印章名称</span>
  228. <span class="seal-form-val">{{ sealEditForm.useSealName || '请选择' }}</span>
  229. <span class="seal-form-arrow">›</span>
  230. </div>
  231. <div style="display:flex;justify-content:space-between;padding:20px 0">
  232. <van-button style="width:48%" @click="sealEditVisible = false">取消</van-button>
  233. <van-button style="width:48%" type="primary" @click="onSealEditSave">保存</van-button>
  234. </div>
  235. </div>
  236. </van-popup>
  237. <!-- 资质选择弹窗 -->
  238. <van-popup v-model:show="qualPopVisible" position="bottom" :style="{ height: '30%' }">
  239. <van-picker
  240. show-toolbar
  241. :title="qualPopType === 'type' ? '资质类型' : '使用资质名称'"
  242. :columns="qualPopType === 'type' ? useQualificationTypeList : useQualificationNameList"
  243. @confirm="onQualPopConfirm"
  244. @cancel="qualPopVisible = false"
  245. />
  246. </van-popup>
  247. <!-- 资质编辑弹窗 -->
  248. <van-popup v-model:show="qualEditVisible" position="bottom" :style="{ height: '55%' }" round>
  249. <div style="padding:16px">
  250. <h4 style="text-align:center;margin-bottom:12px">{{ qualEditTitle }}</h4>
  251. <div class="seal-form-row" @click="openQualPickerInEdit('type')">
  252. <span class="seal-form-label">资质类型</span>
  253. <span class="seal-form-val">{{ qualEditForm.useQualificationType || '请选择' }}</span>
  254. <span class="seal-form-arrow">›</span>
  255. </div>
  256. <div class="seal-form-row">
  257. <span class="seal-form-label">资质使用事由</span>
  258. <input class="seal-form-input" v-model="qualEditForm.useQualificationRemark" placeholder="请输入" />
  259. </div>
  260. <div class="seal-form-row" @click="openQualPickerInEdit('name')">
  261. <span class="seal-form-label">使用资质名称</span>
  262. <span class="seal-form-val">{{ qualEditForm.useQualificationName || '请选择' }}</span>
  263. <span class="seal-form-arrow">›</span>
  264. </div>
  265. <div style="display:flex;justify-content:space-between;padding:20px 0">
  266. <van-button style="width:48%" @click="qualEditVisible = false">取消</van-button>
  267. <van-button style="width:48%" type="primary" @click="onQualEditSave">保存</van-button>
  268. </div>
  269. </div>
  270. </van-popup>
  271. <!-- 产品选择弹窗 -->
  272. <van-popup v-model:show="appPopVisible" position="bottom" :style="{ height: '45%' }">
  273. <van-picker
  274. show-toolbar
  275. title="选择产品名称"
  276. :columns="productNameList"
  277. @confirm="onAppPopConfirm"
  278. @cancel="appPopVisible = false"
  279. />
  280. </van-popup>
  281. <!-- 产品编辑弹窗 -->
  282. <van-popup v-model:show="appEditVisible" position="bottom" :style="{ height: '55%' }" round>
  283. <div style="padding:16px">
  284. <h4 style="text-align:center;margin-bottom:12px">{{ appEditTitle }}</h4>
  285. <div class="seal-form-row" @click="openAppPickerInEdit">
  286. <span class="seal-form-label">产品名称</span>
  287. <span class="seal-form-val">{{ appEditForm.productName || '请选择' }}</span>
  288. <span class="seal-form-arrow">›</span>
  289. </div>
  290. <div class="seal-form-row">
  291. <span class="seal-form-label">数量</span>
  292. <input class="seal-form-input" v-model="appEditForm.quantity" type="number" placeholder="请输入" />
  293. </div>
  294. <div class="seal-form-row">
  295. <span class="seal-form-label">规格型号</span>
  296. <input class="seal-form-input" v-model="appEditForm.specification" placeholder="请输入" />
  297. </div>
  298. <div style="display:flex;justify-content:space-between;padding:20px 0">
  299. <van-button style="width:48%" @click="appEditVisible = false">取消</van-button>
  300. <van-button style="width:48%" type="primary" @click="onAppEditSave">保存</van-button>
  301. </div>
  302. </div>
  303. </van-popup>
  304. <!-- 行程编辑弹窗 -->
  305. <van-popup v-model:show="tripEditVisible" position="bottom" :style="{ height: '70%' }" round>
  306. <div style="padding:16px">
  307. <h4 style="text-align:center;margin-bottom:12px">{{ tripEditTitle }}</h4>
  308. <div class="seal-form-row">
  309. <span class="seal-form-label">交通工具</span>
  310. <input class="seal-form-input" v-model="tripEditForm.transportation" placeholder="飞机/高铁/汽车" />
  311. </div>
  312. <div class="seal-form-row">
  313. <span class="seal-form-label">单程往返</span>
  314. <input class="seal-form-input" v-model="tripEditForm.isRoundTrip" placeholder="单程/往返" />
  315. </div>
  316. <div class="seal-form-row">
  317. <span class="seal-form-label">出发城市</span>
  318. <input class="seal-form-input" v-model="tripEditForm.departureCity" placeholder="请输入" />
  319. </div>
  320. <div class="seal-form-row">
  321. <span class="seal-form-label">目的城市</span>
  322. <input class="seal-form-input" v-model="tripEditForm.destinationCity" placeholder="请输入" />
  323. </div>
  324. <div class="seal-form-row">
  325. <span class="seal-form-label">开始时间</span>
  326. <input class="seal-form-input" type="datetime-local" v-model="tripEditForm.startTime" @change="calcTripDuration" />
  327. </div>
  328. <div class="seal-form-row">
  329. <span class="seal-form-label">结束时间</span>
  330. <input class="seal-form-input" type="datetime-local" v-model="tripEditForm.endTime" @change="calcTripDuration" />
  331. </div>
  332. <div class="seal-form-row">
  333. <span class="seal-form-label">时长</span>
  334. <span class="seal-form-val">{{ tripEditForm.duration || '自动计算' }}</span>
  335. </div>
  336. <div style="display:flex;justify-content:space-between;padding:20px 0">
  337. <van-button style="width:48%" @click="tripEditVisible = false">取消</van-button>
  338. <van-button style="width:48%" type="primary" @click="onTripEditSave">保存</van-button>
  339. </div>
  340. </div>
  341. </van-popup>
  342. <div>
  343. <div v-if='isEdit'
  344. style="display: flex;justify-content: space-between; padding: 30px 30px; position: fixed; bottom: 0; width: 100%; height: 80px;">
  345. <van-button style="width:48%" type="primary" :loading="loading" @click="handleAudit(1)">提交
  346. </van-button>
  347. <van-button style="width:48%" type="danger" :loading="loading" @click="onClickLeft">取消
  348. </van-button>
  349. </div>
  350. </div>
  351. </div>
  352. <script src="./resource/vue.global.prod.js"></script>
  353. <script src="./resource/vant.min.js"></script>
  354. <script src="./resource/axios.min.js"></script>
  355. <script src="./resource/uni.webview.js"></script>
  356. <script src="./vue-form-making/form-making-v3.umd.js"></script>
  357. <script>
  358. let EnvObj = {}
  359. uni.getEnv(function(res) {
  360. EnvObj = res;
  361. console.log('当前环境:' + JSON.stringify(res));
  362. });
  363. Vue.createApp({
  364. data() {
  365. return {
  366. loading: false,
  367. isFlag: false,
  368. isEdit: true,
  369. title: '',
  370. jsonData: {},
  371. editData: {},
  372. form: {},
  373. headers: {},
  374. APIUrl: '',
  375. type: 'add',
  376. selectFilesField: null,
  377. selectFilesRowIndex: null,
  378. // useSealTypeList: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
  379. // useSealNameList: ['公章', '合同章', '财务章', '法人章', '发票章', '部门章'],
  380. sealPopVisible: false, // 印章选择弹窗
  381. sealPopType: 'type', // 'type' | 'name'
  382. sealPopScope: null, // 弹窗对应的 scope(编辑模式为空)
  383. sealPopIndex: null, // 弹窗对应的行索引(编辑模式为当前行)
  384. sealPopIsEdit: false, // 是否来自编辑弹窗
  385. sealEditVisible: false, // 印章编辑弹窗
  386. sealEditTitle: '添加印章使用', // 编辑弹窗标题
  387. sealEditForm: { useSealType: '', useSealRemark: '', useSealName: '' },
  388. sealEditMode: 'add', // 'add' | 'edit'
  389. sealEditScope: null,
  390. sealEditIndex: null,
  391. useSealTypeList: [
  392. {
  393. value: '加盖',
  394. text: '加盖'
  395. },
  396. {
  397. value: '借用',
  398. text: '借用'
  399. },
  400. {
  401. value: '无',
  402. text: '无'
  403. },
  404. ],
  405. useSealNameList: [
  406. {
  407. value: '总公司公章',
  408. text: '总公司公章'
  409. },
  410. {
  411. value: '合同专用章',
  412. text: '合同专用章'
  413. },
  414. {
  415. value: '法人章',
  416. text: '法人章'
  417. },
  418. {
  419. value: '财务专用章',
  420. text: '财务专用章'
  421. },
  422. {
  423. value: '发票专用章',
  424. text: '发票专用章'
  425. },
  426. {
  427. value: '质检专用章',
  428. text: '质检专用章'
  429. },
  430. {
  431. value: '业务专用章',
  432. text: '业务专用章'
  433. },
  434. {
  435. value: '出库专用章',
  436. text: '出库专用章'
  437. },
  438. {
  439. value: '无',
  440. text: '无'
  441. },
  442. ],
  443. // 资质使用
  444. useQualificationTypeList: [
  445. { value: '原件', text: '原件' },
  446. { value: '复印件', text: '复印件' },
  447. { value: '扫描件', text: '扫描件' },
  448. { value: '无', text: '无' },
  449. ],
  450. useQualificationNameList: [
  451. {
  452. value: '营业执照正本(行政人事部)',
  453. text: '营业执照正本(行政人事部)'
  454. },
  455. {
  456. value: '营业执照副本(行政人事部)',
  457. text: '营业执照副本(行政人事部)'
  458. },
  459. {
  460. value: '第一类医疗器械生产备案凭证(行政人事部)',
  461. text: '第一类医疗器械生产备案凭证(行政人事部)'
  462. },
  463. {
  464. value: '开户许可证(行政人事部)',
  465. text: '开户许可证(行政人事部)'
  466. },
  467. {
  468. value: '医疗器械生产许可证(行政人事部)',
  469. text: '医疗器械生产许可证(行政人事部)'
  470. },
  471. {
  472. value: '医疗器械生产产品登记表(行政人事部)',
  473. text: '医疗器械生产产品登记表(行政人事部)'
  474. },
  475. {
  476. value: '专利证书(行政人事部)',
  477. text: '专利证书(行政人事部)'
  478. },
  479. {
  480. value: '二类注册证(注册法务部)',
  481. text: '二类注册证(注册法务部)'
  482. },
  483. {
  484. value: '无',
  485. text: '无'
  486. },
  487. ],
  488. qualPopVisible: false,
  489. qualPopType: 'type',
  490. qualEditVisible: false,
  491. qualEditTitle: '添加资质使用',
  492. qualEditForm: { useQualificationType: '', useQualificationRemark: '', useQualificationName: '' },
  493. qualEditMode: 'add',
  494. qualEditScope: null,
  495. qualEditIndex: null,
  496. qualPopIsEdit: true,
  497. // 产品申请
  498. productNameList: [
  499. { value: '一次性使用刀头', text: '一次性使用刀头' },
  500. { value: '一次性使用多功能引流管', text: '一次性使用多功能引流管' },
  501. { value: '强光手电筒+变径接头', text: '强光手电筒+变径接头' },
  502. { value: '手电筒充电器', text: '手电筒充电器' },
  503. { value: '医用冷敷贴疼痛型', text: '医用冷敷贴疼痛型' },
  504. { value: '医用冷敷凝胶防脱育发型', text: '医用冷敷凝胶防脱育发型' },
  505. { value: '医用冷敷凝胶痔疮型', text: '医用冷敷凝胶痔疮型' },
  506. { value: '医用冷敷凝胶皮肤瘙痒型', text: '医用冷敷凝胶皮肤瘙痒型' },
  507. { value: '医用透明质酸钠修复贴', text: '医用透明质酸钠修复贴' },
  508. { value: '一次性射频等离子手术电极', text: '一次性射频等离子手术电极' },
  509. { value: '一次性冲冼吸引器', text: '一次性冲冼吸引器' },
  510. { value: '一次性使用胃管', text: '一次性使用胃管' },
  511. { value: '笔记本套装', text: '笔记本套装' },
  512. ],
  513. appPopVisible: false,
  514. appEditVisible: false,
  515. appEditTitle: '添加产品',
  516. appEditForm: { productName: '', quantity: '', specification: '' },
  517. appEditMode: 'add',
  518. appEditScope: null,
  519. appEditIndex: null,
  520. // 行程出差
  521. tripEditVisible: false,
  522. tripEditTitle: '添加行程',
  523. tripEditForm: { transportation: '', isRoundTrip: '', departureCity: '', destinationCity: '', startTime: '', endTime: '', duration: '' },
  524. tripEditMode: 'add',
  525. tripEditScope: null,
  526. tripEditIndex: null,
  527. }
  528. },
  529. created() {
  530. let _this = this
  531. window.x_sun = (e) => {
  532. _this.setSalesServiceWork(JSON.parse(e))
  533. }
  534. // 接收文件选择后的回调
  535. window.x_selectFiles = async (e) => {
  536. let data = JSON.parse(e)
  537. console.log('收到选中的文件:', data)
  538. if (_this.$refs.generateForm) {
  539. if (_this.selectFilesRowIndex != null && _this.selectFilesField) {
  540. // 数组行附件:更新 blank_adopzrdd[index].files
  541. let formData = await _this.$refs.generateForm.getData(false);
  542. var arr = formData[_this.selectFilesField] || []
  543. var row = arr[_this.selectFilesRowIndex]
  544. if (row) {
  545. row.files = data.files || []
  546. _this.$refs.generateForm.setData({
  547. [_this.selectFilesField]: arr
  548. })
  549. }
  550. _this.selectFilesRowIndex = null
  551. } else {
  552. // 普通表单字段
  553. _this.$refs.generateForm.setData({
  554. [data.field]: data.files
  555. })
  556. }
  557. }
  558. }
  559. this.headers = this.getQueryParams('headers');
  560. let params = this.getQueryParams('params');
  561. this.isEdit = params.isEdit || true
  562. this.type = params.type || 'add'
  563. this.APIUrl = this.headers.serverInfo || 'http://192.168.1.105:18086'
  564. axios({
  565. method: 'get',
  566. url: this.APIUrl + `/flowable/bpmcustomform/getById/${params.id}`,
  567. headers: this.headers,
  568. }).then((res) => {
  569. if (res.data.code != '-1') {
  570. this.form = res.data.data
  571. this.form.formId = res.data.data.id
  572. this.form.id = ''
  573. this.form.valueJson = {}
  574. this.title = this.form.name
  575. this.jsonData = JSON.parse(res.data.data.formJson.makingJson);
  576. this.jsonData.list.forEach(item => {
  577. item.options.headers = [{
  578. key: 'Authorization',
  579. value: this.headers.Authorization
  580. }]
  581. item.options.action = item.options.action && item.options.action.replace(
  582. '/api', this.APIUrl)
  583. if (item.type == "deptAndUserCascader") {
  584. item.type = 'cascader'
  585. }
  586. if (item.type == "deptCascader") {
  587. item.type = 'cascader'
  588. /* item.isPathValue = false */
  589. if (item.options.isDefaultLoginUser) {
  590. /* this.form.valueJson[item.model] = [1,1765997946953797633]; */
  591. this.form.valueJson[item.model] = params.userInfo.groupIdList;
  592. }
  593. }
  594. if (item.type == "userSelect") {
  595. item.type = 'select'
  596. if (item.options.isDefaultLoginUser) {
  597. this.form.valueJson[item.model] = params.userInfo.userId;
  598. }
  599. }
  600. })
  601. this.jsonData.config.dataSource && this.jsonData.config.dataSource.forEach(item => {
  602. item.headers = {
  603. Authorization: this.headers.Authorization
  604. }
  605. item.url = item.url && item.url.replace('/api', this.APIUrl)
  606. })
  607. this.isFlag = true
  608. this.$nextTick(() => {
  609. if (params.manage_workorder) {
  610. this.setSalesServiceWork(params.manage_workorder)
  611. }
  612. })
  613. }
  614. });
  615. // axios({
  616. // method: 'get',
  617. // url: this.APIUrl + `/bpm/task/list-by-process-instance-id?processInstanceId=${params.id}`,
  618. // headers: this.headers,
  619. // }).then((res) => {
  620. // console.log(res)
  621. // if (res.data.code != '-1') {
  622. // }
  623. // });
  624. },
  625. methods: {
  626. // ===== 印章编辑弹窗 =====
  627. openSealEditDialog(scope, mode, index) {
  628. this.sealEditVisible = true
  629. this.sealEditScope = scope
  630. this.sealEditIndex = index
  631. this.sealEditMode = mode
  632. if (mode === 'edit' && scope.model.blank_use_seal[index]) {
  633. var row = scope.model.blank_use_seal[index]
  634. this.sealEditForm = { useSealType: row.useSealType||'', useSealRemark: row.useSealRemark||'', useSealName: row.useSealName||'' }
  635. this.sealEditTitle = '编辑印章使用'
  636. } else {
  637. this.sealEditForm = { useSealType: '', useSealRemark: '', useSealName: '' }
  638. this.sealEditTitle = '添加印章使用'
  639. }
  640. },
  641. async onSealEditSave() {
  642. var scope = this.sealEditScope
  643. var idx = this.sealEditIndex
  644. var key = 'blank_use_seal'
  645. var data = await this.$refs.generateForm.getData(false);
  646. if (!data[key]) data[key] = []
  647. if (this.sealEditMode === 'edit') {
  648. data[key][idx] = JSON.parse(JSON.stringify(this.sealEditForm))
  649. } else {
  650. data[key].push(JSON.parse(JSON.stringify(this.sealEditForm)))
  651. }
  652. this.$refs.generateForm.setData({ [key]: data[key] })
  653. this.sealEditVisible = false
  654. },
  655. openSealPickerInEdit(fieldType) {
  656. this.sealPopType = fieldType
  657. this.sealPopScope = null
  658. this.sealPopIndex = null
  659. this.sealPopIsEdit = true
  660. this.sealPopVisible = true
  661. },
  662. openSealPicker(scope, index, fieldType) {
  663. this.sealPopScope = scope
  664. this.sealPopIndex = index
  665. this.sealPopType = fieldType || 'type'
  666. this.sealPopIsEdit = false
  667. this.sealPopVisible = true
  668. },
  669. onSealPopConfirm(picker) {
  670. var sel = (picker && picker.selectedOptions && picker.selectedOptions[0]) ? picker.selectedOptions[0].text : picker
  671. var field = this.sealPopType === 'name' ? 'useSealName' : 'useSealType'
  672. if (this.sealPopIsEdit) {
  673. // 编辑弹窗模式:回写到 sealEditForm
  674. this.sealEditForm[field] = sel
  675. } else {
  676. // 列表内联模式
  677. var scope = this.sealPopScope
  678. var idx = this.sealPopIndex
  679. if (scope && scope.model && scope.model.blank_use_seal && scope.model.blank_use_seal[idx]) {
  680. scope.model.blank_use_seal[idx][field] = sel
  681. }
  682. }
  683. this.sealPopVisible = false
  684. },
  685. // ===== 资质使用 =====
  686. openQualEditDialog(scope, mode, index) {
  687. this.qualEditScope = scope
  688. this.qualEditIndex = index
  689. this.qualEditMode = mode
  690. if (mode === 'edit' && scope.model.blank_use_qualification[index]) {
  691. var r = scope.model.blank_use_qualification[index]
  692. this.qualEditForm = { useQualificationType: r.useQualificationType||'', useQualificationRemark: r.useQualificationRemark||'', useQualificationName: r.useQualificationName||'' }
  693. this.qualEditTitle = '编辑资质使用'
  694. } else {
  695. this.qualEditForm = { useQualificationType: '', useQualificationRemark: '', useQualificationName: '' }
  696. this.qualEditTitle = '添加资质使用'
  697. }
  698. this.qualEditVisible = true
  699. },
  700. async onQualEditSave() {
  701. var scope = this.qualEditScope
  702. var idx = this.qualEditIndex
  703. var key = 'blank_use_qualification'
  704. var data = await this.$refs.generateForm.getData(false);
  705. if (!data[key]) data[key] = []
  706. if (this.qualEditMode === 'edit') {
  707. data[key][idx] = JSON.parse(JSON.stringify(this.qualEditForm))
  708. } else {
  709. data[key].push(JSON.parse(JSON.stringify(this.qualEditForm)))
  710. }
  711. this.$refs.generateForm.setData({ [key]: data[key] })
  712. this.qualEditVisible = false
  713. },
  714. openQualPickerInEdit(fieldType) {
  715. this.qualPopType = fieldType
  716. this.qualPopIsEdit = true
  717. this.qualPopVisible = true
  718. },
  719. onQualPopConfirm(picker) {
  720. var sel = (picker && picker.selectedOptions && picker.selectedOptions[0]) ? picker.selectedOptions[0].text : picker
  721. var field = this.qualPopType === 'name' ? 'useQualificationName' : 'useQualificationType'
  722. this.qualEditForm[field] = sel
  723. this.qualPopVisible = false
  724. },
  725. // ===== 产品申请 =====
  726. openAppEditDialog(scope, mode, index) {
  727. this.appEditScope = scope
  728. this.appEditIndex = index
  729. this.appEditMode = mode
  730. if (mode === 'edit' && scope.model.blank_application_component[index]) {
  731. var r = scope.model.blank_application_component[index]
  732. this.appEditForm = { productName: r.productName||'', quantity: r.quantity||'', specification: r.specification||'' }
  733. this.appEditTitle = '编辑产品'
  734. } else {
  735. this.appEditForm = { productName: '', quantity: '', specification: '' }
  736. this.appEditTitle = '添加产品'
  737. }
  738. this.appEditVisible = true
  739. },
  740. async onAppEditSave() {
  741. var scope = this.appEditScope
  742. var idx = this.appEditIndex
  743. var key = 'blank_application_component'
  744. var data = await this.$refs.generateForm.getData(false);
  745. if (!data[key]) data[key] = []
  746. if (this.appEditMode === 'edit') {
  747. data[key][idx] = JSON.parse(JSON.stringify(this.appEditForm))
  748. } else {
  749. data[key].push(JSON.parse(JSON.stringify(this.appEditForm)))
  750. }
  751. this.$refs.generateForm.setData({ [key]: data[key] })
  752. this.appEditVisible = false
  753. },
  754. openAppPickerInEdit() {
  755. this.appPopVisible = true
  756. },
  757. onAppPopConfirm(picker) {
  758. var sel = (picker && picker.selectedOptions && picker.selectedOptions[0]) ? picker.selectedOptions[0].text : picker
  759. this.appEditForm.productName = sel
  760. this.appPopVisible = false
  761. },
  762. // ===== 行程出差 =====
  763. openTripEditDialog(scope, mode, index) {
  764. this.tripEditScope = scope
  765. this.tripEditIndex = index
  766. this.tripEditMode = mode
  767. if (mode === 'edit' && scope.model.blank_business_trip[index]) {
  768. var r = scope.model.blank_business_trip[index]
  769. this.tripEditForm = {
  770. transportation: r.transportation||'', isRoundTrip: r.isRoundTrip||'',
  771. departureCity: r.departureCity||'', destinationCity: r.destinationCity||'',
  772. startTime: r.startTime||'', endTime: r.endTime||'', duration: r.duration||''
  773. }
  774. this.tripEditTitle = '编辑行程'
  775. } else {
  776. this.tripEditForm = { transportation: '', isRoundTrip: '', departureCity: '', destinationCity: '', startTime: '', endTime: '', duration: '' }
  777. this.tripEditTitle = '添加行程'
  778. }
  779. this.tripEditVisible = true
  780. },
  781. calcTripDuration() {
  782. var s = this.tripEditForm.startTime, e = this.tripEditForm.endTime
  783. if (!s || !e) { this.tripEditForm.duration = ''; return }
  784. var ds = new Date(s).getTime(), de = new Date(e).getTime()
  785. if (isNaN(ds) || isNaN(de) || de <= ds) { this.tripEditForm.duration = ''; return }
  786. var diff = Math.floor((de - ds) / 1000)
  787. var d = Math.floor(diff / 86400), h = Math.floor((diff % 86400) / 3600), m = Math.floor((diff % 3600) / 60), sec = diff % 60
  788. var parts = []
  789. if (d) parts.push(d + '天'); if (h) parts.push(h + '时'); if (m) parts.push(m + '分'); if (sec || !parts.length) parts.push(sec + '秒')
  790. this.tripEditForm.duration = parts.join('')
  791. },
  792. async onTripEditSave() {
  793. var scope = this.tripEditScope
  794. var idx = this.tripEditIndex
  795. var key = 'blank_business_trip'
  796. var data = await this.$refs.generateForm.getData(false);
  797. if (!data[key]) data[key] = []
  798. if (this.tripEditMode === 'edit') {
  799. data[key][idx] = JSON.parse(JSON.stringify(this.tripEditForm))
  800. } else {
  801. data[key].push(JSON.parse(JSON.stringify(this.tripEditForm)))
  802. }
  803. this.$refs.generateForm.setData({ [key]: data[key] })
  804. this.tripEditVisible = false
  805. this.calcTripTotal(scope)
  806. },
  807. calcTripTotal(scope) {
  808. var list = scope.model.blank_business_trip || []
  809. var totalSec = 0
  810. list.forEach(function(it) {
  811. var d = it.duration
  812. if (!d) return
  813. var match = { days: d.match(/(\d+)天/), hours: d.match(/(\d+)时/), minutes: d.match(/(\d+)分/), seconds: d.match(/(\d+)秒/) }
  814. totalSec += (parseInt(match.days&&match.days[1])||0)*86400 + (parseInt(match.hours&&match.hours[1])||0)*3600 + (parseInt(match.minutes&&match.minutes[1])||0)*60 + (parseInt(match.seconds&&match.seconds[1])||0)
  815. })
  816. if (totalSec > 0) {
  817. var dy = Math.floor(totalSec/86400), hr = Math.floor((totalSec%86400)/3600), mn = Math.floor((totalSec%3600)/60), sc = totalSec%60
  818. var parts = []
  819. if (dy) parts.push(dy+'天'); if (hr) parts.push(hr+'时'); if (mn) parts.push(mn+'分'); if (sc||!parts.length) parts.push(sc+'秒')
  820. this.$refs.generateForm.setData({ input_if1cav3p: parts.join('') })
  821. }
  822. },
  823. async handleUploadLocal (model, rowIndex) {
  824. console.log('上传本地文件按钮被点击,字段模型:', model, '行索引:', rowIndex)
  825. let data = await this.$refs.generateForm.getData(false);
  826. let files = rowIndex != null && data[model] && data[model][rowIndex] ? (data[model][rowIndex].files || []) : (data[model] || [])
  827. this.selectFilesField = model
  828. this.selectFilesRowIndex = rowIndex != null ? rowIndex : null
  829. uni.postMessage({
  830. data: {
  831. type: 'selectFiles',
  832. field: model,
  833. files: files,
  834. isEdit: this.type || 'add'
  835. }
  836. });
  837. },
  838. addWorkOrder() {
  839. uni.postMessage({
  840. data: {
  841. type: 'selectWork',
  842. }
  843. });
  844. },
  845. async addNewRow(key) {
  846. console.log(key);
  847. let data = await this.$refs.generateForm.getData(false);
  848. data[key].push({
  849. price: '',
  850. remark: ''
  851. });
  852. this.$refs.generateForm.setData({
  853. key: data[key]
  854. });
  855. },
  856. async delNewRow(key, index, isChange) {
  857. let data = await this.$refs.generateForm.getData(false);
  858. data[key] = data[key].filter((item, index1) => index1 != index);
  859. this.$refs.generateForm.setData({
  860. [key]: data[key]
  861. });
  862. if (isChange) {
  863. this.changePrice(data[key])
  864. }
  865. },
  866. changePrice(data) {
  867. let num = 0;
  868. data.forEach((item) => {
  869. num += Number(item.price);
  870. });
  871. this.$refs.generateForm.setData({
  872. input_jd9ouzyh: num
  873. });
  874. },
  875. setSalesServiceWork(data) {
  876. this.$refs.generateForm.setData({
  877. manage_workorder: data
  878. });
  879. this.$refs.generateForm.setRules('manage_workorder', [{
  880. required: false,
  881. message: '必须填写'
  882. }])
  883. setTimeout(() => {
  884. this.$refs.generateForm.validate(['manage_workorder'])
  885. })
  886. },
  887. getQueryParams(queryName) {
  888. const urlSearchParams = new URLSearchParams(window.location.search);
  889. const query = urlSearchParams.get(queryName);
  890. console.log(query, 'query')
  891. return JSON.parse(query);
  892. },
  893. generateFormValid(validate = true) {
  894. return this.$refs.generateForm.getData(validate).then((data) => { //清空content
  895. for (key in data) {
  896. if (key.includes('fileupload')) {
  897. data[key].forEach(item => {
  898. item['content'] = ''
  899. })
  900. }
  901. }
  902. return data;
  903. });
  904. },
  905. async handleAudit(status) {
  906. this.loading = true;
  907. try {
  908. this.form.valueJson = await this.generateFormValid();
  909. } catch (error) {
  910. this.loading = false;
  911. return;
  912. }
  913. console.log(this.form.valueJson)
  914. this.form.processType = '1';
  915. let API = this.APIUrl + '/bpm/process-instance/create'
  916. axios({
  917. method: 'post',
  918. url: API,
  919. headers: this.headers,
  920. data: {
  921. ...this.form,
  922. }
  923. }).then((res) => {
  924. this.loading = false;
  925. if (res.data.code != '-1') {
  926. vant.showNotify({
  927. type: 'success',
  928. message: `提交成功!`,
  929. duration: 1000,
  930. });
  931. setTimeout(() => {
  932. this.onClickLeft()
  933. }, 1000)
  934. } else {
  935. vant.showNotify({
  936. type: 'danger',
  937. message: `提交失败!${res.data.message}`,
  938. duration: 1000,
  939. });
  940. }
  941. }).catch((err) => {
  942. vant.showNotify({
  943. type: 'danger',
  944. message: `提交失败!${err.message}`,
  945. duration: 1000,
  946. });
  947. this.loading = false;
  948. });
  949. },
  950. onClickLeft() {
  951. uni.navigateBack({
  952. delta: 1
  953. });
  954. }
  955. }
  956. }).use(vant).use(FormMakingV3).mount('#app')
  957. </script>
  958. </body>
  959. </html>