mp_xyqj_baseInfo.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  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. [v-cloak] {
  10. display: none !important;
  11. }
  12. #app {
  13. background: #f5f5f5;
  14. min-height: 100vh;
  15. }
  16. .loading {
  17. text-align: center;
  18. padding: 50px;
  19. color: #999;
  20. }
  21. .error {
  22. text-align: center;
  23. padding: 50px;
  24. color: #ff4d4f;
  25. }
  26. .section-title {
  27. padding: 10px 12px;
  28. color: #666;
  29. font-size: 16px;
  30. font-weight: 600;
  31. }
  32. .reason-text {
  33. white-space: pre-wrap;
  34. line-height: 1.6;
  35. }
  36. .attachment-text {
  37. color: #999;
  38. font-size: 14px;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <div id="app" v-cloak>
  44. <div v-if="loading" class="loading">加载中...</div>
  45. <div v-else-if="error" class="error">{{ error }}</div>
  46. <!-- 新增学员请假基本信息回显页 by xu 2026-02-28 -->
  47. <div v-else class="content-div">
  48. <table class="form">
  49. <tr>
  50. <th>请假类别</th>
  51. <td>{{ displayData.rclb || '-' }}</td>
  52. </tr>
  53. <tr>
  54. <th>学员</th>
  55. <td>{{ displayData.fzrymc || displayData.xm || '-' }}</td>
  56. </tr>
  57. <tr>
  58. <th>请假开始时间</th>
  59. <td>{{ displayData.kssj || '-' }}</td>
  60. </tr>
  61. <tr>
  62. <th>请假结束时间</th>
  63. <td>{{ displayData.jssj || '-' }}</td>
  64. </tr>
  65. <tr>
  66. <th>事由</th>
  67. <td class="reason-text">{{ displayData.ms || '-' }}</td>
  68. </tr>
  69. <tr>
  70. <th>附件</th>
  71. <td>
  72. <span class="attachment-text">{{ attachmentText }}</span>
  73. </td>
  74. </tr>
  75. </table>
  76. </div>
  77. </div>
  78. <script>
  79. window.SS.ready(function () {
  80. window.SS.dom.initializeFormApp({
  81. el: '#app',
  82. data() {
  83. return {
  84. pageParams: {},
  85. loading: false,
  86. error: '',
  87. formData: {},
  88. displayData: {
  89. rclb: '',
  90. fzrymc: '',
  91. xm: '',
  92. kssj: '',
  93. jssj: '',
  94. ms: '',
  95. fjid: ''
  96. }
  97. }
  98. },
  99. computed: {
  100. attachmentText() {
  101. if (!this.displayData.fjid) return '暂无附件'
  102. return `已上传(附件ID:${this.displayData.fjid},后续接上传回显)`
  103. }
  104. },
  105. async mounted() {
  106. this.pageParams = this.getUrlParams()
  107. await this.loadData()
  108. },
  109. methods: {
  110. getUrlParams() {
  111. const params = {}
  112. const urlSearchParams = new URLSearchParams(window.location.search)
  113. for (const [key, value] of urlSearchParams) {
  114. params[key] = decodeURIComponent(value)
  115. }
  116. return params
  117. },
  118. parseParamObject(paramStr) {
  119. if (!paramStr) return {}
  120. try {
  121. return JSON.parse(paramStr)
  122. } catch (err) {
  123. try {
  124. const fixed = paramStr.replace(/([,{]\s*)([a-zA-Z_][a-zA-Z0-9_]*)\s*:/g, '$1"$2":')
  125. return JSON.parse(fixed)
  126. } catch (err2) {
  127. console.error('解析param失败:', err2)
  128. return {}
  129. }
  130. }
  131. },
  132. async loadData() {
  133. // 加载请假详情数据并回显 by xu 2026-02-28
  134. const service = this.pageParams.service
  135. if (!service) {
  136. this.error = '缺少service参数'
  137. return
  138. }
  139. this.loading = true
  140. this.error = ''
  141. try {
  142. const paramObj = this.parseParamObject(this.pageParams.param)
  143. const response = await request.post(
  144. `/service?ssServ=${service}&ssDest=data`,
  145. paramObj,
  146. { loading: false, formData: true }
  147. )
  148. const raw = this.pickLeaveData(response?.data)
  149. if (!raw) {
  150. this.error = '未获取到请假数据'
  151. return
  152. }
  153. this.formData = raw
  154. await this.buildDisplayData(raw)
  155. } catch (error) {
  156. console.error('加载请假基本信息失败:', error)
  157. this.error = '加载失败:' + (error.message || '未知错误')
  158. } finally {
  159. this.loading = false
  160. }
  161. },
  162. pickLeaveData(data) {
  163. if (!data) return null
  164. if (data.xyqj) return data.xyqj
  165. if (data.rcqj) return data.rcqj
  166. if (data.qj) return data.qj
  167. if (Array.isArray(data.objectList) && data.objectList.length > 0) return data.objectList[0]
  168. if (Array.isArray(data.data) && data.data.length > 0) return data.data[0]
  169. if (typeof data === 'object') return data
  170. return null
  171. },
  172. async buildDisplayData(raw) {
  173. const cloned = { ...raw }
  174. cloned.kssj = this.formatDate(raw.kssj)
  175. cloned.jssj = this.formatDate(raw.jssj)
  176. cloned.rclb = await this.translateLeaveType(raw.rclbm, raw.rclb)
  177. this.displayData = {
  178. ...this.displayData,
  179. ...cloned
  180. }
  181. },
  182. formatDate(value) {
  183. if (!value) return ''
  184. if (window.H5FieldFormatter && typeof window.H5FieldFormatter.formatDate === 'function') {
  185. return window.H5FieldFormatter.formatDate(value, 'YYYY-MM-DD HH:mm')
  186. }
  187. return value
  188. },
  189. async translateLeaveType(rclbm, fallbackName) {
  190. if (fallbackName) return fallbackName
  191. if (!rclbm) return ''
  192. try {
  193. if (typeof window.getDictOptions === 'function') {
  194. const options = await window.getDictOptions('xyqjlb')
  195. const target = (options || []).find(item => String(item.v) === String(rclbm))
  196. return target ? target.n : rclbm
  197. }
  198. return rclbm
  199. } catch (error) {
  200. console.error('请假类别翻译失败:', error)
  201. return rclbm
  202. }
  203. }
  204. }
  205. })
  206. })
  207. </script>
  208. </body>
  209. </html>