a.html 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873
  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. </fm-generate-vant-form>
  171. <!-- 印章选择弹窗(根层级,避免被 form overflow 裁剪) -->
  172. <van-popup v-model:show="sealPopVisible" position="bottom" :style="{ height: '30%' }" teleport="body">
  173. <van-picker
  174. show-toolbar
  175. :title="sealPopType === 'type' ? '印章使用类型' : '印章名称'"
  176. :columns="sealPopType === 'type' ? useSealTypeList : useSealNameList"
  177. @confirm="onSealPopConfirm"
  178. @cancel="sealPopVisible = false"
  179. />
  180. </van-popup>
  181. <!-- 印章编辑弹窗 -->
  182. <van-popup v-model:show="sealEditVisible" position="bottom" :style="{ height: '55%' }" round>
  183. <div style="padding:16px">
  184. <h4 style="text-align:center;margin-bottom:12px">{{ sealEditTitle }}</h4>
  185. <!-- 印章使用类型 -->
  186. <div class="seal-form-row" @click="openSealPickerInEdit('type')">
  187. <span class="seal-form-label">印章使用类型</span>
  188. <span class="seal-form-val">{{ sealEditForm.useSealType || '请选择' }}</span>
  189. <span class="seal-form-arrow">›</span>
  190. </div>
  191. <!-- 印章使用事由 -->
  192. <div class="seal-form-row">
  193. <span class="seal-form-label">印章使用事由</span>
  194. <input class="seal-form-input" v-model="sealEditForm.useSealRemark" placeholder="请输入" />
  195. </div>
  196. <!-- 印章名称 -->
  197. <div class="seal-form-row" @click="openSealPickerInEdit('name')">
  198. <span class="seal-form-label">印章名称</span>
  199. <span class="seal-form-val">{{ sealEditForm.useSealName || '请选择' }}</span>
  200. <span class="seal-form-arrow">›</span>
  201. </div>
  202. <div style="display:flex;justify-content:space-between;padding:20px 0">
  203. <van-button style="width:48%" @click="sealEditVisible = false">取消</van-button>
  204. <van-button style="width:48%" type="primary" @click="onSealEditSave">保存</van-button>
  205. </div>
  206. </div>
  207. </van-popup>
  208. <!-- 资质选择弹窗 -->
  209. <van-popup v-model:show="qualPopVisible" position="bottom" :style="{ height: '30%' }">
  210. <van-picker
  211. show-toolbar
  212. :title="qualPopType === 'type' ? '资质类型' : '使用资质名称'"
  213. :columns="qualPopType === 'type' ? useQualificationTypeList : useQualificationNameList"
  214. @confirm="onQualPopConfirm"
  215. @cancel="qualPopVisible = false"
  216. />
  217. </van-popup>
  218. <!-- 资质编辑弹窗 -->
  219. <van-popup v-model:show="qualEditVisible" position="bottom" :style="{ height: '55%' }" round>
  220. <div style="padding:16px">
  221. <h4 style="text-align:center;margin-bottom:12px">{{ qualEditTitle }}</h4>
  222. <div class="seal-form-row" @click="openQualPickerInEdit('type')">
  223. <span class="seal-form-label">资质类型</span>
  224. <span class="seal-form-val">{{ qualEditForm.useQualificationType || '请选择' }}</span>
  225. <span class="seal-form-arrow">›</span>
  226. </div>
  227. <div class="seal-form-row">
  228. <span class="seal-form-label">资质使用事由</span>
  229. <input class="seal-form-input" v-model="qualEditForm.useQualificationRemark" placeholder="请输入" />
  230. </div>
  231. <div class="seal-form-row" @click="openQualPickerInEdit('name')">
  232. <span class="seal-form-label">使用资质名称</span>
  233. <span class="seal-form-val">{{ qualEditForm.useQualificationName || '请选择' }}</span>
  234. <span class="seal-form-arrow">›</span>
  235. </div>
  236. <div style="display:flex;justify-content:space-between;padding:20px 0">
  237. <van-button style="width:48%" @click="qualEditVisible = false">取消</van-button>
  238. <van-button style="width:48%" type="primary" @click="onQualEditSave">保存</van-button>
  239. </div>
  240. </div>
  241. </van-popup>
  242. <!-- 产品选择弹窗 -->
  243. <van-popup v-model:show="appPopVisible" position="bottom" :style="{ height: '45%' }">
  244. <van-picker
  245. show-toolbar
  246. title="选择产品名称"
  247. :columns="productNameList"
  248. @confirm="onAppPopConfirm"
  249. @cancel="appPopVisible = false"
  250. />
  251. </van-popup>
  252. <!-- 产品编辑弹窗 -->
  253. <van-popup v-model:show="appEditVisible" position="bottom" :style="{ height: '55%' }" round>
  254. <div style="padding:16px">
  255. <h4 style="text-align:center;margin-bottom:12px">{{ appEditTitle }}</h4>
  256. <div class="seal-form-row" @click="openAppPickerInEdit">
  257. <span class="seal-form-label">产品名称</span>
  258. <span class="seal-form-val">{{ appEditForm.productName || '请选择' }}</span>
  259. <span class="seal-form-arrow">›</span>
  260. </div>
  261. <div class="seal-form-row">
  262. <span class="seal-form-label">数量</span>
  263. <input class="seal-form-input" v-model="appEditForm.quantity" type="number" placeholder="请输入" />
  264. </div>
  265. <div class="seal-form-row">
  266. <span class="seal-form-label">规格型号</span>
  267. <input class="seal-form-input" v-model="appEditForm.specification" placeholder="请输入" />
  268. </div>
  269. <div style="display:flex;justify-content:space-between;padding:20px 0">
  270. <van-button style="width:48%" @click="appEditVisible = false">取消</van-button>
  271. <van-button style="width:48%" type="primary" @click="onAppEditSave">保存</van-button>
  272. </div>
  273. </div>
  274. </van-popup>
  275. <div>
  276. <div v-if='isEdit'
  277. style="display: flex;justify-content: space-between; padding: 30px 30px; position: fixed; bottom: 0; width: 100%; height: 80px;">
  278. <van-button style="width:48%" type="primary" :loading="loading" @click="handleAudit(1)">提交
  279. </van-button>
  280. <van-button style="width:48%" type="danger" :loading="loading" @click="onClickLeft">取消
  281. </van-button>
  282. </div>
  283. </div>
  284. </div>
  285. <script src="./resource/vue.global.prod.js"></script>
  286. <script src="./resource/vant.min.js"></script>
  287. <script src="./resource/axios.min.js"></script>
  288. <script src="./resource/uni.webview.js"></script>
  289. <script src="./vue-form-making/form-making-v3.umd.js"></script>
  290. <script>
  291. let EnvObj = {}
  292. uni.getEnv(function(res) {
  293. EnvObj = res;
  294. console.log('当前环境:' + JSON.stringify(res));
  295. });
  296. Vue.createApp({
  297. data() {
  298. return {
  299. loading: false,
  300. isFlag: false,
  301. isEdit: true,
  302. title: '',
  303. jsonData: {},
  304. editData: {},
  305. form: {},
  306. headers: {},
  307. APIUrl: '',
  308. type: 'add',
  309. selectFilesField: null,
  310. selectFilesRowIndex: null,
  311. // useSealTypeList: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
  312. // useSealNameList: ['公章', '合同章', '财务章', '法人章', '发票章', '部门章'],
  313. sealPopVisible: false, // 印章选择弹窗
  314. sealPopType: 'type', // 'type' | 'name'
  315. sealPopScope: null, // 弹窗对应的 scope(编辑模式为空)
  316. sealPopIndex: null, // 弹窗对应的行索引(编辑模式为当前行)
  317. sealPopIsEdit: false, // 是否来自编辑弹窗
  318. sealEditVisible: false, // 印章编辑弹窗
  319. sealEditTitle: '添加印章使用', // 编辑弹窗标题
  320. sealEditForm: { useSealType: '', useSealRemark: '', useSealName: '' },
  321. sealEditMode: 'add', // 'add' | 'edit'
  322. sealEditScope: null,
  323. sealEditIndex: null,
  324. useSealTypeList: [
  325. {
  326. value: '加盖',
  327. text: '加盖'
  328. },
  329. {
  330. value: '借用',
  331. text: '借用'
  332. },
  333. {
  334. value: '无',
  335. text: '无'
  336. },
  337. ],
  338. useSealNameList: [
  339. {
  340. value: '总公司公章',
  341. text: '总公司公章'
  342. },
  343. {
  344. value: '合同专用章',
  345. text: '合同专用章'
  346. },
  347. {
  348. value: '法人章',
  349. text: '法人章'
  350. },
  351. {
  352. value: '财务专用章',
  353. text: '财务专用章'
  354. },
  355. {
  356. value: '发票专用章',
  357. text: '发票专用章'
  358. },
  359. {
  360. value: '质检专用章',
  361. text: '质检专用章'
  362. },
  363. {
  364. value: '业务专用章',
  365. text: '业务专用章'
  366. },
  367. {
  368. value: '出库专用章',
  369. text: '出库专用章'
  370. },
  371. {
  372. value: '无',
  373. text: '无'
  374. },
  375. ],
  376. // 资质使用
  377. useQualificationTypeList: [
  378. { value: '原件', text: '原件' },
  379. { value: '复印件', text: '复印件' },
  380. { value: '扫描件', text: '扫描件' },
  381. { value: '无', text: '无' },
  382. ],
  383. useQualificationNameList: [
  384. {
  385. value: '营业执照正本(行政人事部)',
  386. text: '营业执照正本(行政人事部)'
  387. },
  388. {
  389. value: '营业执照副本(行政人事部)',
  390. text: '营业执照副本(行政人事部)'
  391. },
  392. {
  393. value: '第一类医疗器械生产备案凭证(行政人事部)',
  394. text: '第一类医疗器械生产备案凭证(行政人事部)'
  395. },
  396. {
  397. value: '开户许可证(行政人事部)',
  398. text: '开户许可证(行政人事部)'
  399. },
  400. {
  401. value: '医疗器械生产许可证(行政人事部)',
  402. text: '医疗器械生产许可证(行政人事部)'
  403. },
  404. {
  405. value: '医疗器械生产产品登记表(行政人事部)',
  406. text: '医疗器械生产产品登记表(行政人事部)'
  407. },
  408. {
  409. value: '专利证书(行政人事部)',
  410. text: '专利证书(行政人事部)'
  411. },
  412. {
  413. value: '二类注册证(注册法务部)',
  414. text: '二类注册证(注册法务部)'
  415. },
  416. {
  417. value: '无',
  418. text: '无'
  419. },
  420. ],
  421. qualPopVisible: false,
  422. qualPopType: 'type',
  423. qualEditVisible: false,
  424. qualEditTitle: '添加资质使用',
  425. qualEditForm: { useQualificationType: '', useQualificationRemark: '', useQualificationName: '' },
  426. qualEditMode: 'add',
  427. qualEditScope: null,
  428. qualEditIndex: null,
  429. qualPopIsEdit: true,
  430. // 产品申请
  431. productNameList: [
  432. { value: '一次性使用刀头', text: '一次性使用刀头' },
  433. { value: '一次性使用多功能引流管', text: '一次性使用多功能引流管' },
  434. { value: '强光手电筒+变径接头', text: '强光手电筒+变径接头' },
  435. { value: '手电筒充电器', text: '手电筒充电器' },
  436. { value: '医用冷敷贴疼痛型', text: '医用冷敷贴疼痛型' },
  437. { value: '医用冷敷凝胶防脱育发型', text: '医用冷敷凝胶防脱育发型' },
  438. { value: '医用冷敷凝胶痔疮型', text: '医用冷敷凝胶痔疮型' },
  439. { value: '医用冷敷凝胶皮肤瘙痒型', text: '医用冷敷凝胶皮肤瘙痒型' },
  440. { value: '医用透明质酸钠修复贴', text: '医用透明质酸钠修复贴' },
  441. { value: '一次性射频等离子手术电极', text: '一次性射频等离子手术电极' },
  442. { value: '一次性冲冼吸引器', text: '一次性冲冼吸引器' },
  443. { value: '一次性使用胃管', text: '一次性使用胃管' },
  444. { value: '笔记本套装', text: '笔记本套装' },
  445. ],
  446. appPopVisible: false,
  447. appEditVisible: false,
  448. appEditTitle: '添加产品',
  449. appEditForm: { productName: '', quantity: '', specification: '' },
  450. appEditMode: 'add',
  451. appEditScope: null,
  452. appEditIndex: null,
  453. }
  454. },
  455. created() {
  456. let _this = this
  457. window.x_sun = (e) => {
  458. _this.setSalesServiceWork(JSON.parse(e))
  459. }
  460. // 接收文件选择后的回调
  461. window.x_selectFiles = async (e) => {
  462. let data = JSON.parse(e)
  463. console.log('收到选中的文件:', data)
  464. if (_this.$refs.generateForm) {
  465. if (_this.selectFilesRowIndex != null && _this.selectFilesField) {
  466. // 数组行附件:更新 blank_adopzrdd[index].files
  467. let formData = await _this.$refs.generateForm.getData(false);
  468. var arr = formData[_this.selectFilesField] || []
  469. var row = arr[_this.selectFilesRowIndex]
  470. if (row) {
  471. row.files = data.files || []
  472. _this.$refs.generateForm.setData({
  473. [_this.selectFilesField]: arr
  474. })
  475. }
  476. _this.selectFilesRowIndex = null
  477. } else {
  478. // 普通表单字段
  479. _this.$refs.generateForm.setData({
  480. [data.field]: data.files
  481. })
  482. }
  483. }
  484. }
  485. this.headers = this.getQueryParams('headers');
  486. let params = this.getQueryParams('params');
  487. this.isEdit = params.isEdit || true
  488. this.type = params.type || 'add'
  489. this.APIUrl = this.headers.serverInfo || 'http://192.168.1.105:18086'
  490. axios({
  491. method: 'get',
  492. url: this.APIUrl + `/flowable/bpmcustomform/getById/${params.id}`,
  493. headers: this.headers,
  494. }).then((res) => {
  495. if (res.data.code != '-1') {
  496. this.form = res.data.data
  497. this.form.formId = res.data.data.id
  498. this.form.id = ''
  499. this.form.valueJson = {}
  500. this.title = this.form.name
  501. this.jsonData = JSON.parse(res.data.data.formJson.makingJson);
  502. this.jsonData.list.forEach(item => {
  503. item.options.headers = [{
  504. key: 'Authorization',
  505. value: this.headers.Authorization
  506. }]
  507. item.options.action = item.options.action && item.options.action.replace(
  508. '/api', this.APIUrl)
  509. if (item.type == "deptAndUserCascader") {
  510. item.type = 'cascader'
  511. }
  512. if (item.type == "deptCascader") {
  513. item.type = 'cascader'
  514. /* item.isPathValue = false */
  515. if (item.options.isDefaultLoginUser) {
  516. /* this.form.valueJson[item.model] = [1,1765997946953797633]; */
  517. this.form.valueJson[item.model] = params.userInfo.groupIdList;
  518. }
  519. }
  520. if (item.type == "userSelect") {
  521. item.type = 'select'
  522. if (item.options.isDefaultLoginUser) {
  523. this.form.valueJson[item.model] = params.userInfo.userId;
  524. }
  525. }
  526. })
  527. this.jsonData.config.dataSource && this.jsonData.config.dataSource.forEach(item => {
  528. item.headers = {
  529. Authorization: this.headers.Authorization
  530. }
  531. item.url = item.url && item.url.replace('/api', this.APIUrl)
  532. })
  533. this.isFlag = true
  534. this.$nextTick(() => {
  535. if (params.manage_workorder) {
  536. this.setSalesServiceWork(params.manage_workorder)
  537. }
  538. })
  539. }
  540. });
  541. // axios({
  542. // method: 'get',
  543. // url: this.APIUrl + `/bpm/task/list-by-process-instance-id?processInstanceId=${params.id}`,
  544. // headers: this.headers,
  545. // }).then((res) => {
  546. // console.log(res)
  547. // if (res.data.code != '-1') {
  548. // }
  549. // });
  550. },
  551. methods: {
  552. // ===== 印章编辑弹窗 =====
  553. openSealEditDialog(scope, mode, index) {
  554. this.sealEditVisible = true
  555. this.sealEditScope = scope
  556. this.sealEditIndex = index
  557. this.sealEditMode = mode
  558. if (mode === 'edit' && scope.model.blank_use_seal[index]) {
  559. var row = scope.model.blank_use_seal[index]
  560. this.sealEditForm = { useSealType: row.useSealType||'', useSealRemark: row.useSealRemark||'', useSealName: row.useSealName||'' }
  561. this.sealEditTitle = '编辑印章使用'
  562. } else {
  563. this.sealEditForm = { useSealType: '', useSealRemark: '', useSealName: '' }
  564. this.sealEditTitle = '添加印章使用'
  565. }
  566. },
  567. async onSealEditSave() {
  568. var scope = this.sealEditScope
  569. var idx = this.sealEditIndex
  570. var key = 'blank_use_seal'
  571. var data = await this.$refs.generateForm.getData(false);
  572. if (!data[key]) data[key] = []
  573. if (this.sealEditMode === 'edit') {
  574. data[key][idx] = JSON.parse(JSON.stringify(this.sealEditForm))
  575. } else {
  576. data[key].push(JSON.parse(JSON.stringify(this.sealEditForm)))
  577. }
  578. this.$refs.generateForm.setData({ [key]: data[key] })
  579. this.sealEditVisible = false
  580. },
  581. openSealPickerInEdit(fieldType) {
  582. this.sealPopType = fieldType
  583. this.sealPopScope = null
  584. this.sealPopIndex = null
  585. this.sealPopIsEdit = true
  586. this.sealPopVisible = true
  587. },
  588. openSealPicker(scope, index, fieldType) {
  589. this.sealPopScope = scope
  590. this.sealPopIndex = index
  591. this.sealPopType = fieldType || 'type'
  592. this.sealPopIsEdit = false
  593. this.sealPopVisible = true
  594. },
  595. onSealPopConfirm(picker) {
  596. var sel = (picker && picker.selectedOptions && picker.selectedOptions[0]) ? picker.selectedOptions[0].text : picker
  597. var field = this.sealPopType === 'name' ? 'useSealName' : 'useSealType'
  598. if (this.sealPopIsEdit) {
  599. // 编辑弹窗模式:回写到 sealEditForm
  600. this.sealEditForm[field] = sel
  601. } else {
  602. // 列表内联模式
  603. var scope = this.sealPopScope
  604. var idx = this.sealPopIndex
  605. if (scope && scope.model && scope.model.blank_use_seal && scope.model.blank_use_seal[idx]) {
  606. scope.model.blank_use_seal[idx][field] = sel
  607. }
  608. }
  609. this.sealPopVisible = false
  610. },
  611. // ===== 资质使用 =====
  612. openQualEditDialog(scope, mode, index) {
  613. this.qualEditScope = scope
  614. this.qualEditIndex = index
  615. this.qualEditMode = mode
  616. if (mode === 'edit' && scope.model.blank_use_qualification[index]) {
  617. var r = scope.model.blank_use_qualification[index]
  618. this.qualEditForm = { useQualificationType: r.useQualificationType||'', useQualificationRemark: r.useQualificationRemark||'', useQualificationName: r.useQualificationName||'' }
  619. this.qualEditTitle = '编辑资质使用'
  620. } else {
  621. this.qualEditForm = { useQualificationType: '', useQualificationRemark: '', useQualificationName: '' }
  622. this.qualEditTitle = '添加资质使用'
  623. }
  624. this.qualEditVisible = true
  625. },
  626. async onQualEditSave() {
  627. var scope = this.qualEditScope
  628. var idx = this.qualEditIndex
  629. var key = 'blank_use_qualification'
  630. var data = await this.$refs.generateForm.getData(false);
  631. if (!data[key]) data[key] = []
  632. if (this.qualEditMode === 'edit') {
  633. data[key][idx] = JSON.parse(JSON.stringify(this.qualEditForm))
  634. } else {
  635. data[key].push(JSON.parse(JSON.stringify(this.qualEditForm)))
  636. }
  637. this.$refs.generateForm.setData({ [key]: data[key] })
  638. this.qualEditVisible = false
  639. },
  640. openQualPickerInEdit(fieldType) {
  641. this.qualPopType = fieldType
  642. this.qualPopIsEdit = true
  643. this.qualPopVisible = true
  644. },
  645. onQualPopConfirm(picker) {
  646. var sel = (picker && picker.selectedOptions && picker.selectedOptions[0]) ? picker.selectedOptions[0].text : picker
  647. var field = this.qualPopType === 'name' ? 'useQualificationName' : 'useQualificationType'
  648. this.qualEditForm[field] = sel
  649. this.qualPopVisible = false
  650. },
  651. // ===== 产品申请 =====
  652. openAppEditDialog(scope, mode, index) {
  653. this.appEditScope = scope
  654. this.appEditIndex = index
  655. this.appEditMode = mode
  656. if (mode === 'edit' && scope.model.blank_application_component[index]) {
  657. var r = scope.model.blank_application_component[index]
  658. this.appEditForm = { productName: r.productName||'', quantity: r.quantity||'', specification: r.specification||'' }
  659. this.appEditTitle = '编辑产品'
  660. } else {
  661. this.appEditForm = { productName: '', quantity: '', specification: '' }
  662. this.appEditTitle = '添加产品'
  663. }
  664. this.appEditVisible = true
  665. },
  666. async onAppEditSave() {
  667. var scope = this.appEditScope
  668. var idx = this.appEditIndex
  669. var key = 'blank_application_component'
  670. var data = await this.$refs.generateForm.getData(false);
  671. if (!data[key]) data[key] = []
  672. if (this.appEditMode === 'edit') {
  673. data[key][idx] = JSON.parse(JSON.stringify(this.appEditForm))
  674. } else {
  675. data[key].push(JSON.parse(JSON.stringify(this.appEditForm)))
  676. }
  677. this.$refs.generateForm.setData({ [key]: data[key] })
  678. this.appEditVisible = false
  679. },
  680. openAppPickerInEdit() {
  681. this.appPopVisible = true
  682. },
  683. onAppPopConfirm(picker) {
  684. var sel = (picker && picker.selectedOptions && picker.selectedOptions[0]) ? picker.selectedOptions[0].text : picker
  685. this.appEditForm.productName = sel
  686. this.appPopVisible = false
  687. },
  688. async handleUploadLocal (model, rowIndex) {
  689. console.log('上传本地文件按钮被点击,字段模型:', model, '行索引:', rowIndex)
  690. let data = await this.$refs.generateForm.getData(false);
  691. let files = rowIndex != null && data[model] && data[model][rowIndex] ? (data[model][rowIndex].files || []) : (data[model] || [])
  692. this.selectFilesField = model
  693. this.selectFilesRowIndex = rowIndex != null ? rowIndex : null
  694. uni.postMessage({
  695. data: {
  696. type: 'selectFiles',
  697. field: model,
  698. files: files,
  699. isEdit: this.type || 'add'
  700. }
  701. });
  702. },
  703. addWorkOrder() {
  704. uni.postMessage({
  705. data: {
  706. type: 'selectWork',
  707. }
  708. });
  709. },
  710. async addNewRow(key) {
  711. console.log(key);
  712. let data = await this.$refs.generateForm.getData(false);
  713. data[key].push({
  714. price: '',
  715. remark: ''
  716. });
  717. this.$refs.generateForm.setData({
  718. key: data[key]
  719. });
  720. },
  721. async delNewRow(key, index, isChange) {
  722. let data = await this.$refs.generateForm.getData(false);
  723. data[key] = data[key].filter((item, index1) => index1 != index);
  724. this.$refs.generateForm.setData({
  725. [key]: data[key]
  726. });
  727. if (isChange) {
  728. this.changePrice(data[key])
  729. }
  730. },
  731. changePrice(data) {
  732. let num = 0;
  733. data.forEach((item) => {
  734. num += Number(item.price);
  735. });
  736. this.$refs.generateForm.setData({
  737. input_jd9ouzyh: num
  738. });
  739. },
  740. setSalesServiceWork(data) {
  741. this.$refs.generateForm.setData({
  742. manage_workorder: data
  743. });
  744. this.$refs.generateForm.setRules('manage_workorder', [{
  745. required: false,
  746. message: '必须填写'
  747. }])
  748. setTimeout(() => {
  749. this.$refs.generateForm.validate(['manage_workorder'])
  750. })
  751. },
  752. getQueryParams(queryName) {
  753. const urlSearchParams = new URLSearchParams(window.location.search);
  754. const query = urlSearchParams.get(queryName);
  755. console.log(query, 'query')
  756. return JSON.parse(query);
  757. },
  758. generateFormValid(validate = true) {
  759. return this.$refs.generateForm.getData(validate).then((data) => { //清空content
  760. for (key in data) {
  761. if (key.includes('fileupload')) {
  762. data[key].forEach(item => {
  763. item['content'] = ''
  764. })
  765. }
  766. }
  767. return data;
  768. });
  769. },
  770. async handleAudit(status) {
  771. this.loading = true;
  772. try {
  773. this.form.valueJson = await this.generateFormValid();
  774. } catch (error) {
  775. this.loading = false;
  776. return;
  777. }
  778. console.log(this.form.valueJson)
  779. this.form.processType = '1';
  780. let API = this.APIUrl + '/bpm/process-instance/create'
  781. axios({
  782. method: 'post',
  783. url: API,
  784. headers: this.headers,
  785. data: {
  786. ...this.form,
  787. }
  788. }).then((res) => {
  789. this.loading = false;
  790. if (res.data.code != '-1') {
  791. vant.showNotify({
  792. type: 'success',
  793. message: `提交成功!`,
  794. duration: 1000,
  795. });
  796. setTimeout(() => {
  797. this.onClickLeft()
  798. }, 1000)
  799. } else {
  800. vant.showNotify({
  801. type: 'danger',
  802. message: `提交失败!${res.data.message}`,
  803. duration: 1000,
  804. });
  805. }
  806. }).catch((err) => {
  807. vant.showNotify({
  808. type: 'danger',
  809. message: `提交失败!${err.message}`,
  810. duration: 1000,
  811. });
  812. this.loading = false;
  813. });
  814. },
  815. onClickLeft() {
  816. uni.navigateBack({
  817. delta: 1
  818. });
  819. }
  820. }
  821. }).use(vant).use(FormMakingV3).mount('#app')
  822. </script>
  823. </body>
  824. </html>