mp_chgChgchk.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta
  6. name="viewport"
  7. content="width=device-width, initial-scale=1.0, user-scalable=no"
  8. />
  9. <title>变动情况 1</title>
  10. <script src="/js/mp_base/base.js"></script>
  11. <style>
  12. [v-cloak] {
  13. display: none !important;
  14. }
  15. #app {
  16. background: #f5f5f5;
  17. min-height: 100vh;
  18. }
  19. /* 新增变动情况页纯转圈加载态 by xu 2026-03-06 */
  20. .loading {
  21. min-height: 40vh;
  22. display: flex;
  23. align-items: center;
  24. justify-content: center;
  25. padding: 32px 16px;
  26. }
  27. .loading-spinner {
  28. width: 30px;
  29. height: 30px;
  30. border: 3px solid #e8f3ed;
  31. border-top-color: #40ac6d;
  32. border-radius: 50%;
  33. animation: page-spin 0.9s linear infinite;
  34. }
  35. @keyframes page-spin {
  36. from {
  37. transform: rotate(0deg);
  38. }
  39. to {
  40. transform: rotate(360deg);
  41. }
  42. }
  43. .status-wrap {
  44. padding: 16px;
  45. }
  46. .status-card {
  47. background: #fff;
  48. border-radius: 8px;
  49. padding: 16px;
  50. box-sizing: border-box;
  51. }
  52. .status-title {
  53. font-size: 15px;
  54. font-weight: 600;
  55. color: #2d3748;
  56. }
  57. .status-text {
  58. margin-top: 8px;
  59. line-height: 1.6;
  60. color: #4a5568;
  61. font-size: 13px;
  62. word-break: break-all;
  63. }
  64. .status-retry {
  65. margin-top: 12px;
  66. height: 34px;
  67. padding: 0 14px;
  68. border: none;
  69. border-radius: 4px;
  70. background: #4a5568;
  71. color: #fff;
  72. font-size: 13px;
  73. }
  74. .ss-sub-tab {
  75. min-height: 100vh;
  76. }
  77. .ss-sub-tab__content {
  78. background: #fff;
  79. }
  80. .ss-sub-tab__content iframe {
  81. width: 100%;
  82. min-height: calc(100vh - 56px);
  83. }
  84. /* 变动页签页补充 URL 调试浮层,便于打开和复制当前地址 by xu 2026-03-08 */
  85. .url-log-fab {
  86. position: fixed;
  87. right: 12px;
  88. bottom: 72px;
  89. z-index: 1200;
  90. border: none;
  91. border-radius: 16px;
  92. background: rgba(36, 40, 53, 0.88);
  93. color: #fff;
  94. font-size: 12px;
  95. line-height: 1;
  96. padding: 8px 10px;
  97. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  98. display: none;
  99. }
  100. .url-log-panel {
  101. position: fixed;
  102. left: 12px;
  103. right: 12px;
  104. bottom: 116px;
  105. z-index: 1200;
  106. background: rgba(36, 40, 53, 0.96);
  107. color: #fff;
  108. border-radius: 8px;
  109. padding: 10px;
  110. max-height: 42vh;
  111. overflow: auto;
  112. box-sizing: border-box;
  113. }
  114. .url-log-panel__head {
  115. display: flex;
  116. align-items: center;
  117. justify-content: space-between;
  118. margin-bottom: 8px;
  119. font-size: 12px;
  120. }
  121. .url-log-panel__close {
  122. border: none;
  123. background: transparent;
  124. color: #fff;
  125. font-size: 14px;
  126. line-height: 1;
  127. }
  128. .url-log-panel__actions {
  129. display: flex;
  130. flex-wrap: wrap;
  131. gap: 8px;
  132. margin-bottom: 8px;
  133. }
  134. .url-log-action {
  135. border: none;
  136. border-radius: 4px;
  137. padding: 5px 10px;
  138. font-size: 12px;
  139. color: #fff;
  140. background: rgba(255, 255, 255, 0.16);
  141. }
  142. .url-log-panel__body {
  143. margin: 0;
  144. white-space: pre-wrap;
  145. word-break: break-all;
  146. font-size: 12px;
  147. line-height: 1.5;
  148. }
  149. </style>
  150. </head>
  151. <body>
  152. <div id="app" v-cloak>
  153. <!-- 新增变动情况页纯转圈加载态 by xu 2026-03-06 -->
  154. <div v-if="loading" class="loading">
  155. <div class="loading-spinner"></div>
  156. </div>
  157. <div v-else-if="error" class="status-wrap">
  158. <div class="status-card">
  159. <div class="status-title">页面加载失败</div>
  160. <div class="status-text">{{ error }}</div>
  161. <button class="status-retry" type="button" @click="loadTabList">
  162. 重新加载
  163. </button>
  164. </div>
  165. </div>
  166. <div v-else-if="!tabList.length" class="status-wrap">
  167. <div class="status-card">
  168. <div class="status-title">暂无变动页签</div>
  169. <div class="status-text">当前接口未返回可展示的页签数据。</div>
  170. </div>
  171. </div>
  172. <!-- 新增变动情况子页 Tab 承接 by xu 2026-03-06 -->
  173. <ss-sub-tab
  174. v-else
  175. :tab-list="tabList"
  176. :base-params="baseParams"
  177. @tab-change="handleTabChange"
  178. />
  179. <!-- 变动页签页补充 URL 调试入口,便于打开和复制当前地址 by xu 2026-03-08 -->
  180. <button class="url-log-fab" type="button" @click="showCurrentUrls">
  181. URL
  182. </button>
  183. <div class="url-log-panel" v-if="urlLogVisible">
  184. <div class="url-log-panel__head">
  185. <span>当前 URL</span>
  186. <div>
  187. <button class="url-log-action" type="button" @click="showCurrentUrls">显示当前 URL</button>
  188. <button class="url-log-panel__close" type="button" @click="urlLogVisible = false">
  189. ×
  190. </button>
  191. </div>
  192. </div>
  193. <div class="url-log-panel__actions">
  194. <button class="url-log-action" type="button" @click="openCurrentUrl('page')">打开页面</button>
  195. <button class="url-log-action" type="button" @click="copyCurrentUrl('page')">复制页面</button>
  196. <button class="url-log-action" type="button" @click="openCurrentUrl('tab')">打开Tab</button>
  197. <button class="url-log-action" type="button" @click="copyCurrentUrl('tab')">复制Tab</button>
  198. </div>
  199. <pre class="url-log-panel__body">{{ urlLogText }}</pre>
  200. </div>
  201. </div>
  202. <script>
  203. window.SS.ready(function () {
  204. window.SS.dom.initializeFormApp({
  205. el: "#app",
  206. data() {
  207. return {
  208. pageParams: {},
  209. loading: false,
  210. error: "",
  211. tabList: [],
  212. baseParams: {},
  213. urlLogVisible: false,
  214. urlLogText: '',
  215. currentPageUrl: '',
  216. currentTabUrl: '',
  217. };
  218. },
  219. mounted() {
  220. this.pageParams = this.getUrlParams();
  221. this.loadTabList();
  222. },
  223. methods: {
  224. getUrlParams() {
  225. const params = {};
  226. const aliasMap = {
  227. ssobjname: "ssObjName",
  228. ssobjid: "ssObjId",
  229. datatype: "dataType",
  230. };
  231. const urlSearchParams = new URLSearchParams(
  232. window.location.search
  233. );
  234. for (const [rawKey, rawValue] of urlSearchParams) {
  235. const decodedValue = this.safeDecode(rawValue);
  236. params[rawKey] = decodedValue;
  237. const normalizedKey = aliasMap[String(rawKey).toLowerCase()];
  238. if (normalizedKey) {
  239. params[normalizedKey] = decodedValue;
  240. }
  241. }
  242. return params;
  243. },
  244. safeDecode(text) {
  245. if (text === undefined || text === null || text === "") return "";
  246. try {
  247. return decodeURIComponent(String(text));
  248. } catch (_) {
  249. return String(text);
  250. }
  251. },
  252. parseParamObject(paramStr) {
  253. if (!paramStr) return {};
  254. if (typeof paramStr === "object") return paramStr;
  255. try {
  256. return JSON.parse(paramStr);
  257. } catch (_) {
  258. try {
  259. const fixed = String(paramStr)
  260. .replace(/([{,]\s*)([A-Za-z0-9_]+)\s*:/g, '$1"$2":')
  261. .replace(/'/g, '"');
  262. return JSON.parse(fixed);
  263. } catch (error) {
  264. console.error("解析param失败:", error);
  265. return {};
  266. }
  267. }
  268. },
  269. buildBaseParams(serviceName, destName, paramText) {
  270. return {
  271. sqid: this.pageParams.sqid || "",
  272. shid: this.pageParams.shid || "",
  273. shyjm: this.pageParams.shyjm || "",
  274. bdlbm: this.pageParams.bdlbm || "",
  275. dataType: this.pageParams.dataType || this.pageParams.datatype || "bdplay",
  276. encode_shid: this.pageParams.encode_shid || "",
  277. ssObjName: this.pageParams.ssObjName || this.pageParams.ssobjname || "",
  278. ssObjId: this.pageParams.ssObjId || this.pageParams.ssobjid || "",
  279. jdmc: this.pageParams.jdmc || "",
  280. service: serviceName,
  281. dest: destName,
  282. ssServ: serviceName,
  283. ssDest: destName,
  284. param: paramText,
  285. };
  286. },
  287. pickTabList(data) {
  288. if (!data) return [];
  289. if (Array.isArray(data.tabList)) return data.tabList;
  290. if (data.data && Array.isArray(data.data.tabList)) return data.data.tabList;
  291. if (data.chgList && Array.isArray(data.chgList.tabList)) return data.chgList.tabList;
  292. if (Array.isArray(data.tabs)) return data.tabs;
  293. return [];
  294. },
  295. async loadTabList() {
  296. // 按 chgChkTab 规则加载变动子页签数据 by xu 2026-03-06
  297. this.loading = true;
  298. this.error = "";
  299. this.tabList = [];
  300. try {
  301. const serviceName = String(
  302. this.pageParams.service || this.pageParams.ssServ || "selChgInfo"
  303. ).trim();
  304. const destName = String(
  305. this.pageParams.dest || this.pageParams.ssDest || "chgList"
  306. ).trim();
  307. const paramObj = this.parseParamObject(this.pageParams.param);
  308. const requestData = {
  309. ...paramObj,
  310. };
  311. const appendIfMissing = (targetKey, sourceKeys) => {
  312. if (
  313. requestData[targetKey] !== undefined &&
  314. requestData[targetKey] !== null &&
  315. requestData[targetKey] !== ""
  316. ) {
  317. return;
  318. }
  319. for (let i = 0; i < sourceKeys.length; i += 1) {
  320. const value = this.pageParams[sourceKeys[i]];
  321. if (value !== undefined && value !== null && value !== "") {
  322. requestData[targetKey] = value;
  323. return;
  324. }
  325. }
  326. };
  327. appendIfMissing("sqid", ["sqid"]);
  328. appendIfMissing("shid", ["shid"]);
  329. appendIfMissing("ssObjName", ["ssObjName", "ssobjname"]);
  330. appendIfMissing("ssObjId", ["ssObjId", "ssobjid"]);
  331. appendIfMissing("bdlbm", ["bdlbm"]);
  332. appendIfMissing("dataType", ["dataType", "datatype"]);
  333. appendIfMissing("encode_shid", ["encode_shid"]);
  334. appendIfMissing("jdmc", ["jdmc"]);
  335. appendIfMissing("ssToken", ["ssToken"]);
  336. const response = await request.post(
  337. `/service?ssServ=${encodeURIComponent(
  338. serviceName
  339. )}&ssDest=${encodeURIComponent(destName)}`,
  340. requestData,
  341. { loading: false, formData: true }
  342. );
  343. const responseData = response && response.data ? response.data : response;
  344. this.tabList = this.pickTabList(responseData);
  345. this.baseParams = this.buildBaseParams(
  346. serviceName,
  347. destName,
  348. typeof this.pageParams.param === "string"
  349. ? this.pageParams.param
  350. : JSON.stringify(requestData || {})
  351. );
  352. // 新增变动页签单页兜底 by xu 2026-03-06
  353. if (!this.tabList.length && destName) {
  354. this.tabList = [
  355. {
  356. desc: '变动详情',
  357. title: '变动详情',
  358. service: serviceName,
  359. dest: destName,
  360. param: typeof this.pageParams.param === "string"
  361. ? this.pageParams.param
  362. : JSON.stringify(requestData || {}),
  363. },
  364. ];
  365. }
  366. if (!this.tabList.length) {
  367. console.warn("[mp_chgChgchk] 未获取到tabList:", responseData);
  368. }
  369. } catch (error) {
  370. console.error("加载变动情况页签失败:", error);
  371. this.error = (error && error.message) || "加载失败,请稍后重试";
  372. } finally {
  373. this.loading = false;
  374. }
  375. },
  376. getCurrentTabIframeSrc() {
  377. const frame = document.querySelector('.ss-sub-tab__content iframe');
  378. return (frame && frame.src) || '';
  379. },
  380. getCurrentUrlMap() {
  381. return {
  382. page: window.location.href,
  383. tab: this.getCurrentTabIframeSrc(),
  384. };
  385. },
  386. // 功能说明:变动页签页补充“显示当前 URL”按钮,并直接展示 page/tab 文本 by xu 2026-03-08
  387. showCurrentUrls() {
  388. const currentUrls = this.getCurrentUrlMap();
  389. this.currentPageUrl = currentUrls.page || '';
  390. this.currentTabUrl = currentUrls.tab || '';
  391. this.urlLogText = [
  392. `page: ${this.currentPageUrl || '(empty)'}`,
  393. `tab: ${this.currentTabUrl || '(empty)'}`,
  394. ].join('\n');
  395. this.urlLogVisible = true;
  396. },
  397. getUrlByType(type) {
  398. const currentUrls = this.getCurrentUrlMap();
  399. return String(currentUrls[type] || '').trim();
  400. },
  401. async copyText(text) {
  402. const value = String(text || '').trim();
  403. if (!value) throw new Error('empty');
  404. if (navigator.clipboard && navigator.clipboard.writeText) {
  405. await navigator.clipboard.writeText(value);
  406. return;
  407. }
  408. const textarea = document.createElement('textarea');
  409. textarea.value = value;
  410. textarea.style.position = 'fixed';
  411. textarea.style.opacity = '0';
  412. document.body.appendChild(textarea);
  413. textarea.focus();
  414. textarea.select();
  415. document.execCommand('copy');
  416. document.body.removeChild(textarea);
  417. },
  418. async copyCurrentUrl(type) {
  419. try {
  420. await this.copyText(this.getUrlByType(type));
  421. if (typeof showToastEffect === 'function') showToastEffect('URL 已复制', 1400, 'success');
  422. } catch (_) {
  423. if (typeof showToastEffect === 'function') showToastEffect('复制失败', 1800, 'error');
  424. }
  425. },
  426. openCurrentUrl(type) {
  427. const url = this.getUrlByType(type);
  428. if (!url) {
  429. if (typeof showToastEffect === 'function') showToastEffect('当前没有可打开的 URL', 1800, 'warning');
  430. return;
  431. }
  432. const newWindow = window.open(url, '_blank');
  433. if (!newWindow) {
  434. window.location.href = url;
  435. }
  436. },
  437. handleTabChange({ index, tab }) {
  438. console.log("[mp_chgChgchk] 切换页签:", index, tab);
  439. if (this.urlLogVisible) {
  440. setTimeout(() => this.showCurrentUrls(), 80);
  441. }
  442. },
  443. },
  444. });
  445. });
  446. </script>
  447. </body>
  448. </html>