mp_clClyd_baseInfo.html 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  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. .loading {
  10. text-align: center;
  11. padding: 50px;
  12. color: #999;
  13. }
  14. .error {
  15. text-align: center;
  16. padding: 50px;
  17. color: #ff4d4f;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div id="app" v-cloak>
  23. <div v-if="loading" class="loading">加载中...</div>
  24. <div v-else-if="error" class="error">{{ error }}</div>
  25. <div v-else class="content-div">
  26. <table class="form">
  27. <tr>
  28. <th>名称</th>
  29. <td>{{ wpmc || formData.wpid || '-' }}</td>
  30. </tr>
  31. <tr>
  32. <th>使用人数</th>
  33. <td>{{ formData.syrs || '-' }}</td>
  34. </tr>
  35. <tr>
  36. <th>目的地</th>
  37. <td>{{ formData.mdd || '-' }}</td>
  38. </tr>
  39. <tr>
  40. <th>描述</th>
  41. <td>{{ formData.syyq || '-' }}</td>
  42. </tr>
  43. <tr>
  44. <th>开始时间</th>
  45. <td>{{ formData.kssj || '-' }}</td>
  46. </tr>
  47. <tr>
  48. <th>结束时间</th>
  49. <td>{{ formData.jssj || '-' }}</td>
  50. </tr>
  51. </table>
  52. </div>
  53. </div>
  54. <script>
  55. // 等待SS框架加载完成
  56. window.SS.ready(function () {
  57. window.SS.dom.initializeFormApp({
  58. el: '#app',
  59. data() {
  60. return {
  61. pageParams: {},
  62. loading: false,
  63. error: '',
  64. formData: {},
  65. wpmc: '' // 物品名称(通过wpid转换得到)
  66. }
  67. },
  68. mounted() {
  69. // 获取URL参数
  70. this.pageParams = this.getUrlParams()
  71. console.log('📄 mp_clClyd_baseInfo 页面参数:', this.pageParams)
  72. // 加载数据
  73. this.loadData()
  74. },
  75. methods: {
  76. // 获取URL参数
  77. getUrlParams() {
  78. const params = {}
  79. const urlSearchParams = new URLSearchParams(window.location.search)
  80. for (const [key, value] of urlSearchParams) {
  81. params[key] = decodeURIComponent(value)
  82. }
  83. return params
  84. },
  85. // 加载数据
  86. async loadData() {
  87. const service = this.pageParams.service
  88. const paramStr = this.pageParams.param
  89. if (!service) {
  90. this.error = '缺少 service 参数'
  91. console.error('❌ 缺少 service 参数')
  92. return
  93. }
  94. this.loading = true
  95. this.error = ''
  96. try {
  97. console.log('📋 调用 service:', service)
  98. console.log('📋 原始 param:', paramStr)
  99. // 解析 param 参数
  100. let paramObj = {}
  101. if (paramStr) {
  102. try {
  103. // 尝试直接解析
  104. paramObj = JSON.parse(paramStr)
  105. console.log('✅ 解析后的 param:', paramObj)
  106. } catch (e) {
  107. console.warn('⚠️ param 格式有误,尝试修复:', paramStr)
  108. try {
  109. // 修复常见的 JSON 格式问题:bdlbm:1 -> "bdlbm":1
  110. const fixedParamStr = paramStr.replace(/([,{]\s*)([a-zA-Z_][a-zA-Z0-9_]*)\s*:/g, '$1"$2":')
  111. paramObj = JSON.parse(fixedParamStr)
  112. console.log('✅ 修复后解析成功:', paramObj)
  113. } catch (e2) {
  114. console.error('❌ param 解析失败:', e2, '原始字符串:', paramStr)
  115. paramObj = {}
  116. }
  117. }
  118. }
  119. // 调用 service 接口
  120. const response = await request.post(
  121. `/service?ssServ=${service}&ssDest=data`,
  122. paramObj,
  123. { loading: false, formData: true }
  124. )
  125. console.log('✅ service 响应:', response)
  126. // 处理响应数据
  127. if (response && response.data && response.data.clClyd) {
  128. const data = response.data.clClyd
  129. console.log('📊 clClyd 数据:', data)
  130. // 直接使用响应数据
  131. this.formData = data
  132. // 格式化时间字段
  133. if (data.kssj && window.H5FieldFormatter) {
  134. this.formData.kssj = window.H5FieldFormatter.formatDate(data.kssj, 'yyyy-MM-dd HH:mm:ss')
  135. }
  136. if (data.jssj && window.H5FieldFormatter) {
  137. this.formData.jssj = window.H5FieldFormatter.formatDate(data.jssj, 'yyyy-MM-dd HH:mm:ss')
  138. }
  139. // 转换 wpid 为物品名称
  140. if (data.wpid && window.getDictTranslation) {
  141. this.translateWpid(data.wpid)
  142. }
  143. console.log('✅ 表单数据已更新:', this.formData)
  144. } else {
  145. this.error = '未获取到数据'
  146. console.warn('⚠️ 响应数据中没有 clClyd 字段')
  147. }
  148. } catch (error) {
  149. console.error('❌ 加载数据失败:', error)
  150. this.error = '加载数据失败:' + (error.message || '未知错误')
  151. } finally {
  152. this.loading = false
  153. }
  154. },
  155. // 转换 wpid 为物品名称
  156. async translateWpid(wpid) {
  157. try {
  158. console.log('🔄 转换 wpid:', wpid)
  159. const dictCache = new Map()
  160. const cacheKey = `wp_${wpid}`
  161. // 调用字典转换
  162. await window.getDictTranslation(
  163. 'wp', // cbName
  164. wpid, // value
  165. cacheKey, // cacheKey
  166. dictCache, // dictCache
  167. () => { // updateCallback
  168. // 更新物品名称
  169. this.wpmc = dictCache.get(cacheKey) || wpid
  170. console.log('✅ 物品名称已更新:', this.wpmc)
  171. }
  172. )
  173. } catch (error) {
  174. console.error('❌ wpid 转换失败:', error)
  175. this.wpmc = wpid // 转换失败显示原值
  176. }
  177. }
  178. }
  179. })
  180. })
  181. </script>
  182. </body>
  183. </html>