mp_objInp.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  6. <title>公共录入</title>
  7. <script src="/js/mp_base/base.js"></script>
  8. <style>
  9. body {
  10. margin: 0;
  11. background: #f5f5f5;
  12. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  13. }
  14. #app {
  15. min-height: 100vh;
  16. background: #f5f5f5;
  17. overflow: hidden;
  18. }
  19. .content {
  20. width: 100%;
  21. height: 100vh;
  22. min-height: 0;
  23. }
  24. .form-frame {
  25. width: 100%;
  26. height: 100%;
  27. border: 0;
  28. display: block;
  29. background: #fff;
  30. }
  31. .placeholder {
  32. padding: 28px 16px;
  33. color: #666;
  34. font-size: 14px;
  35. text-align: center;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <div id="app">
  41. <div class="content" id="contentWrap">
  42. <iframe
  43. v-if="iframeSrc"
  44. id="objInpFrame"
  45. class="form-frame"
  46. :src="iframeSrc"
  47. @load="handleFrameLoad"
  48. ></iframe>
  49. <div v-else class="placeholder" id="placeholder">{{ placeholderText }}</div>
  50. </div>
  51. <ss-bottom
  52. v-if="showBottom"
  53. :buttons="bottomButtons"
  54. @button-click="handleBottomAction"
  55. >
  56. </ss-bottom>
  57. </div>
  58. <script>
  59. // 功能说明:公共录入壳页(先调业务接口+dataTag,再按 include_input 装载 mp_ 表单页) by xu 2026-02-28
  60. (function () {
  61. const boot = function () {
  62. const setStatus = (text) => {
  63. if (state.vm) {
  64. state.vm.placeholderText = text;
  65. return;
  66. }
  67. const placeholder = document.getElementById('placeholder');
  68. if (placeholder) placeholder.textContent = text;
  69. };
  70. const state = {
  71. pageParams: {},
  72. service: '',
  73. initPayload: {},
  74. dataTagPayload: {},
  75. ssObjName: '',
  76. ssObjId: '',
  77. iframe: null,
  78. submitEnabled: false,
  79. vm: null,
  80. };
  81. const getUrlParams = () => {
  82. const params = {};
  83. const search = new URLSearchParams(window.location.search || '');
  84. for (const [key, value] of search.entries()) {
  85. params[key] = decodeURIComponent(value || '');
  86. }
  87. return params;
  88. };
  89. const unwrapData = (data) => {
  90. if (!data || typeof data !== 'object') return {};
  91. if (data.ssData && typeof data.ssData === 'object') return data.ssData;
  92. return data;
  93. };
  94. const parseJsonString = (text) => {
  95. if (!text || typeof text !== 'string') return {};
  96. try {
  97. const obj = JSON.parse(text);
  98. return obj && typeof obj === 'object' ? obj : {};
  99. } catch (_) {
  100. return {};
  101. }
  102. };
  103. const pruneParams = (obj) => {
  104. const out = {};
  105. Object.entries(obj || {}).forEach(([key, value]) => {
  106. if (value === undefined || value === null || value === '') return;
  107. out[key] = value;
  108. });
  109. return out;
  110. };
  111. // 功能说明:新增场景 id=0 统一按空处理,和你要求保持一致 by xu 2026-02-28
  112. const resolveObjIdFromInit = (payload, ssObjName, urlParams) => {
  113. const fromUrl = String(urlParams.ssObjId || '').trim();
  114. if (fromUrl) return fromUrl;
  115. if (!payload || typeof payload !== 'object') return '';
  116. const objName = String(ssObjName || '').trim();
  117. if (!objName) return '';
  118. const objData = payload[objName];
  119. if (!objData || typeof objData !== 'object') return '';
  120. const idField = String(payload.ssObjIdName || objData.idName || '').trim();
  121. if (!idField) return '';
  122. const rawId = objData[idField];
  123. if (rawId === undefined || rawId === null || rawId === '' || Number(rawId) === 0) return '';
  124. return String(rawId);
  125. };
  126. // 功能说明:/page/xyqj_inp.jsp -> /page/mp_xyqj_inp.html by xu 2026-02-28
  127. const includeToMpFormPath = (includeInput) => {
  128. const raw = String(includeInput || '').trim();
  129. if (!raw) return '';
  130. const noPrefix = raw.replace(/^\/page\//i, '');
  131. const base = noPrefix.replace(/\.ss\.jsp$/i, '').replace(/\.jsp$/i, '');
  132. if (!base) return '';
  133. return `/page/mp_${base}.html`;
  134. };
  135. const goBack = (refreshParent) => {
  136. if (window.NavigationManager && typeof window.NavigationManager.goBack === 'function') {
  137. window.NavigationManager.goBack({ refreshParent: !!refreshParent });
  138. } else {
  139. window.history.back();
  140. }
  141. };
  142. const ensureRequest = () => {
  143. if (!window.request || typeof window.request.post !== 'function') {
  144. throw new Error('request 未就绪');
  145. }
  146. return window.request;
  147. };
  148. // 功能说明:内容区高度按 100vh 减去 ss-bottom 实际高度计算 by xu 2026-02-28
  149. const updateContentHeight = () => {
  150. const contentWrap = document.getElementById('contentWrap');
  151. if (!contentWrap) return;
  152. const bottom = document.querySelector('#app .ss-bottom');
  153. const bottomHeight = bottom ? bottom.offsetHeight : 0;
  154. contentWrap.style.height = `calc(100vh - ${bottomHeight}px)`;
  155. };
  156. const updateBottomButtons = (submitTitle) => {
  157. if (!state.vm) return;
  158. state.vm.bottomButtons = [
  159. { text: '关闭', action: 'close' },
  160. {
  161. text: submitTitle || '保存并提交',
  162. action: 'saveSubmit',
  163. backgroundColor: '#575d6d',
  164. color: '#fff'
  165. }
  166. ];
  167. setTimeout(updateContentHeight, 0);
  168. };
  169. // 功能说明:供 iframe 子页调用,控制父页底部按钮显隐(解决日期弹层被底部按钮遮挡) by xu 2026-02-28
  170. const setBottomVisible = (visible) => {
  171. if (!state.vm) return;
  172. state.vm.showBottom = visible !== false;
  173. setTimeout(updateContentHeight, 0);
  174. };
  175. const getFrameFormData = () => {
  176. const frame = document.getElementById('objInpFrame');
  177. const frameWindow = frame ? frame.contentWindow : null;
  178. if (!frameWindow) return { valid: false, message: '表单页面未加载完成', data: {} };
  179. // 功能说明:优先走子页面暴露方法,尽量减少表单页工作量 by xu 2026-02-28
  180. if (typeof frameWindow.__mpObjInpGetFormData === 'function') {
  181. const result = frameWindow.__mpObjInpGetFormData();
  182. if (result && typeof result === 'object') {
  183. return {
  184. valid: result.valid !== false,
  185. message: result.message || '',
  186. data: result.data && typeof result.data === 'object' ? result.data : {},
  187. };
  188. }
  189. }
  190. const doc = frameWindow.document;
  191. const data = {};
  192. const nodes = doc.querySelectorAll('input[name],select[name],textarea[name]');
  193. nodes.forEach((node) => {
  194. const name = node.getAttribute('name');
  195. if (!name || node.disabled) return;
  196. const type = (node.getAttribute('type') || '').toLowerCase();
  197. if ((type === 'checkbox' || type === 'radio') && !node.checked) return;
  198. data[name] = node.value;
  199. });
  200. return { valid: true, message: '', data };
  201. };
  202. const getSubmitConfig = () => {
  203. const p = state.initPayload || {};
  204. // 功能说明:移动端只保留“保存并提交”,按钮可见性按第一接口 saveAndCommitDest 判断 by xu 2026-02-28
  205. const enabled = !!String(p.saveAndCommitDest || '').trim();
  206. return {
  207. enabled,
  208. serviceName: String(p.saveAndCommit || '').trim(),
  209. dest: String(p.saveAndCommitDest || '').trim(),
  210. title: String(p.saveAndCommitButtonValue || '保存并提交'),
  211. paramObj: parseJsonString(p.saveAndCommitParam),
  212. };
  213. };
  214. const renderFormFrame = () => {
  215. const includeInput = (state.dataTagPayload && state.dataTagPayload.include_input) || '';
  216. const formPath = includeToMpFormPath(includeInput);
  217. console.log('[mp_objInp][renderFormFrame] include_input =', includeInput);
  218. console.log('[mp_objInp][renderFormFrame] formPath =', formPath);
  219. if (!formPath) {
  220. if (state.vm) {
  221. state.vm.iframeSrc = '';
  222. state.vm.placeholderText = '未获取到 include_input,无法加载表单页';
  223. }
  224. state.submitEnabled = false;
  225. console.warn('[mp_objInp][renderFormFrame] formPath为空,终止渲染iframe');
  226. return;
  227. }
  228. const childParams = new URLSearchParams();
  229. Object.entries(state.pageParams || {}).forEach(([key, value]) => {
  230. if (value === undefined || value === null || value === '') return;
  231. childParams.set(key, value);
  232. });
  233. childParams.set('embed', '1');
  234. childParams.set('ssObjName', state.ssObjName || '');
  235. childParams.set('ssObjId', state.ssObjId || '');
  236. const iframeSrc = `${formPath}?${childParams.toString()}`;
  237. console.log('[mp_objInp][renderFormFrame] iframe src =', iframeSrc);
  238. if (state.vm) {
  239. state.vm.iframeSrc = iframeSrc;
  240. }
  241. const submitCfg = getSubmitConfig();
  242. state.submitEnabled = !!submitCfg.enabled;
  243. updateBottomButtons(submitCfg.title);
  244. setTimeout(updateContentHeight, 0);
  245. };
  246. const loadInitPayload = async () => {
  247. const req = ensureRequest();
  248. const postData = {
  249. ...state.pageParams,
  250. management: state.pageParams.management || '1',
  251. isReady: '1',
  252. };
  253. const res = await req.post(
  254. `/service?ssServ=${state.service}&management=1&isReady=1`,
  255. postData,
  256. { loading: false, formData: true }
  257. );
  258. state.initPayload = unwrapData(res ? res.data : null);
  259. state.ssObjName = String(state.initPayload.ssObjName || state.pageParams.ssObjName || '').trim();
  260. state.ssObjId = resolveObjIdFromInit(state.initPayload, state.ssObjName, state.pageParams);
  261. console.log('[mp_objInp] init响应', state.initPayload);
  262. };
  263. const loadDataTagPayload = async () => {
  264. const req = ensureRequest();
  265. const dataTagParams = {
  266. ...state.pageParams,
  267. ssObjName: state.ssObjName,
  268. ssObjId: state.ssObjId,
  269. };
  270. const res = await req.post(
  271. `/service?ssServ=dataTag&ssDest=data&name=inp&ssObjName=${encodeURIComponent(state.ssObjName)}&ssObjId=${encodeURIComponent(state.ssObjId)}`,
  272. dataTagParams,
  273. { loading: false, formData: true }
  274. );
  275. state.dataTagPayload = unwrapData(res ? res.data : null);
  276. console.log('[mp_objInp] dataTag响应', state.dataTagPayload);
  277. console.log('[mp_objInp] dataTag include_input =', (state.dataTagPayload && state.dataTagPayload.include_input) || '');
  278. };
  279. const submitSaveAndCommit = async () => {
  280. try {
  281. const cfg = getSubmitConfig();
  282. if (!state.submitEnabled || !cfg.enabled) {
  283. if (typeof showToastEffect === 'function') showToastEffect('当前页面不支持保存并提交', 1800, 'warning');
  284. return;
  285. }
  286. if (!cfg.serviceName || !cfg.dest) {
  287. if (typeof showToastEffect === 'function') showToastEffect('提交配置缺失', 1800, 'error');
  288. return;
  289. }
  290. const formResult = getFrameFormData();
  291. if (!formResult.valid) {
  292. if (typeof showToastEffect === 'function') showToastEffect(formResult.message || '表单校验未通过', 2000, 'warning');
  293. return;
  294. }
  295. const req = ensureRequest();
  296. const payload = pruneParams({
  297. ...(cfg.paramObj || {}),
  298. ...(formResult.data || {}),
  299. ssObjName: state.ssObjName || undefined,
  300. ssObjId: state.ssObjId || undefined,
  301. [((state.initPayload && state.initPayload.ssObjIdName) || 'ssObjId')]: state.ssObjId || undefined,
  302. });
  303. const res = await req.post(
  304. `/service?ssServ=${cfg.serviceName}&ssDest=${encodeURIComponent(cfg.dest)}`,
  305. payload,
  306. { loading: true, formData: true }
  307. );
  308. console.log('[mp_objInp] saveAndCommit响应', res);
  309. const submitResp = unwrapData(res ? res.data : null);
  310. // 功能说明:对齐PC流程,保存并提交后若目标为 addSure,则进入 mp_addSure 进行二次确认 by xu 2026-02-28
  311. if (String(cfg.dest || '').trim().toLowerCase() === 'addsure') {
  312. // 功能说明:addSure 跳转参数改为白名单,避免将复杂对象/超长字段带入 URL 导致后端解析异常 by xu 2026-03-01
  313. const allowedKeys = [
  314. 'msg',
  315. 'ms',
  316. 'print',
  317. 'dataType',
  318. 'ssServ',
  319. 'thisViewObject',
  320. 'wdclosewindowparam',
  321. ];
  322. const safeRespParams = {};
  323. const respObj = submitResp && typeof submitResp === 'object' ? submitResp : {};
  324. Object.keys(respObj).forEach((key) => {
  325. if (!allowedKeys.includes(key)) return;
  326. const value = respObj[key];
  327. if (value === undefined || value === null) return;
  328. const valueType = typeof value;
  329. if (valueType === 'string' || valueType === 'number' || valueType === 'boolean') {
  330. safeRespParams[key] = value;
  331. }
  332. });
  333. const nextParams = pruneParams({
  334. ssObjName: submitResp.ssObjName || state.ssObjName,
  335. ssObjId: submitResp.ssObjId || state.ssObjId,
  336. ssObjIdName: submitResp.ssObjIdName || (state.initPayload && state.initPayload.ssObjIdName) || 'ssObjId',
  337. fromObjInp: '1',
  338. ...safeRespParams,
  339. });
  340. if (window.NavigationManager && typeof window.NavigationManager.goTo === 'function') {
  341. window.NavigationManager.goTo('mp_addSure', nextParams, { needRefresh: true });
  342. } else {
  343. const qp = new URLSearchParams();
  344. Object.keys(nextParams).forEach((k) => qp.set(k, nextParams[k]));
  345. window.location.href = `/page/mp_addSure.html?${qp.toString()}`;
  346. }
  347. return;
  348. }
  349. if (typeof showToastEffect === 'function') showToastEffect('提交成功', 1400, 'success');
  350. setTimeout(() => goBack(true), 600);
  351. } catch (err) {
  352. console.error('[mp_objInp] 提交失败', err);
  353. if (typeof showToastEffect === 'function') showToastEffect('提交失败,请稍后重试', 2200, 'error');
  354. }
  355. };
  356. const init = async () => {
  357. try {
  358. setStatus('正在初始化录入页...');
  359. state.pageParams = getUrlParams();
  360. state.service = String(state.pageParams.service || '').trim();
  361. if (!state.service) throw new Error('缺少 service 参数');
  362. setStatus('正在加载业务配置...');
  363. await loadInitPayload();
  364. if (!state.ssObjName) throw new Error('第一接口未返回 ssObjName');
  365. setStatus('正在加载 dataTag...');
  366. await loadDataTagPayload();
  367. setStatus('正在加载表单页面...');
  368. renderFormFrame();
  369. setTimeout(updateContentHeight, 0);
  370. } catch (err) {
  371. console.error('[mp_objInp] 初始化失败', err);
  372. setStatus(`初始化失败:${err && err.message ? err.message : err}`);
  373. state.submitEnabled = false;
  374. }
  375. };
  376. window.addEventListener('resize', updateContentHeight);
  377. // 功能说明:使用 ss-bottom 统一底部样式与交互 by xu 2026-02-28
  378. window.SS.dom.initializeFormApp({
  379. el: '#app',
  380. data() {
  381. return {
  382. iframeSrc: '',
  383. placeholderText: '正在加载录入页面...',
  384. showBottom: true,
  385. bottomButtons: [
  386. { text: '关闭', action: 'close' },
  387. {
  388. text: '保存并提交',
  389. action: 'saveSubmit',
  390. backgroundColor: '#575d6d',
  391. color: '#fff'
  392. }
  393. ]
  394. }
  395. },
  396. methods: {
  397. handleFrameLoad() {
  398. console.log('[mp_objInp][renderFormFrame] iframe onload');
  399. setTimeout(updateContentHeight, 0);
  400. },
  401. handleBottomAction(payload) {
  402. if (payload && payload.action === 'close') {
  403. goBack(false);
  404. return;
  405. }
  406. if (payload && payload.action === 'saveSubmit') {
  407. submitSaveAndCommit();
  408. }
  409. }
  410. },
  411. mounted() {
  412. state.vm = this;
  413. window.__mpObjInpSetBottomVisible = setBottomVisible;
  414. init();
  415. },
  416. beforeUnmount() {
  417. window.removeEventListener('resize', updateContentHeight);
  418. try {
  419. if (window.__mpObjInpSetBottomVisible === setBottomVisible) {
  420. delete window.__mpObjInpSetBottomVisible;
  421. }
  422. } catch (_) {}
  423. }
  424. });
  425. };
  426. // 功能说明:SS.ready 某些场景可能不触发,增加超时兜底启动 by xu 2026-02-28
  427. let booted = false;
  428. let tries = 0;
  429. const maxTries = 20;
  430. const safeBoot = function () {
  431. if (booted) return;
  432. const ready = !!(window.SS && window.SS.dom && typeof window.SS.dom.initializeFormApp === 'function');
  433. if (!ready) {
  434. tries += 1;
  435. if (tries >= maxTries) {
  436. const ph = document.getElementById('placeholder');
  437. if (ph) ph.textContent = '初始化失败:ss 组件未就绪';
  438. return;
  439. }
  440. setTimeout(safeBoot, 200);
  441. return;
  442. }
  443. booted = true;
  444. boot();
  445. };
  446. if (window.SS && typeof window.SS.ready === 'function') {
  447. window.SS.ready(safeBoot);
  448. setTimeout(safeBoot, 1600);
  449. } else {
  450. setTimeout(safeBoot, 0);
  451. }
  452. })();
  453. </script>
  454. </body>
  455. </html>