| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
- <title>基本情况</title>
- <script src="/js/mp_base/base.js"></script>
- <style>
-
-
- .loading {
- text-align: center;
- padding: 50px;
- color: #999;
- }
- .error {
- text-align: center;
- padding: 50px;
- color: #ff4d4f;
- }
- </style>
- </head>
- <body>
- <div id="app" v-cloak>
- <div v-if="loading" class="loading">加载中...</div>
- <div v-else-if="error" class="error">{{ error }}</div>
- <div v-else class="content-div">
- <table class="form">
- <tr>
- <th>名称</th>
- <td>{{ wpmc || formData.wpid || '-' }}</td>
- </tr>
- <tr>
- <th>使用人数</th>
- <td>{{ formData.syrs || '-' }}</td>
- </tr>
- <tr>
- <th>目的地</th>
- <td>{{ formData.mdd || '-' }}</td>
- </tr>
- <tr>
- <th>描述</th>
- <td>{{ formData.syyq || '-' }}</td>
- </tr>
- <tr>
- <th>开始时间</th>
- <td>{{ formData.kssj || '-' }}</td>
- </tr>
- <tr>
- <th>结束时间</th>
- <td>{{ formData.jssj || '-' }}</td>
- </tr>
- </table>
- </div>
- </div>
- <script>
- // 等待SS框架加载完成
- window.SS.ready(function () {
- window.SS.dom.initializeFormApp({
- el: '#app',
- data() {
- return {
- pageParams: {},
- loading: false,
- error: '',
- formData: {},
- wpmc: '' // 物品名称(通过wpid转换得到)
- }
- },
- mounted() {
- // 获取URL参数
- this.pageParams = this.getUrlParams()
- console.log('📄 mp_clClyd_baseInfo 页面参数:', this.pageParams)
- // 加载数据
- this.loadData()
- },
- methods: {
- // 获取URL参数
- getUrlParams() {
- const params = {}
- const urlSearchParams = new URLSearchParams(window.location.search)
- for (const [key, value] of urlSearchParams) {
- params[key] = decodeURIComponent(value)
- }
- return params
- },
- // 加载数据
- async loadData() {
- const service = this.pageParams.service
- const paramStr = this.pageParams.param
- if (!service) {
- this.error = '缺少 service 参数'
- console.error('❌ 缺少 service 参数')
- return
- }
- this.loading = true
- this.error = ''
- try {
- console.log('📋 调用 service:', service)
- console.log('📋 原始 param:', paramStr)
- // 解析 param 参数
- let paramObj = {}
- if (paramStr) {
- try {
- // 尝试直接解析
- paramObj = JSON.parse(paramStr)
- console.log('✅ 解析后的 param:', paramObj)
- } catch (e) {
- console.warn('⚠️ param 格式有误,尝试修复:', paramStr)
- try {
- // 修复常见的 JSON 格式问题:bdlbm:1 -> "bdlbm":1
- const fixedParamStr = paramStr.replace(/([,{]\s*)([a-zA-Z_][a-zA-Z0-9_]*)\s*:/g, '$1"$2":')
- paramObj = JSON.parse(fixedParamStr)
- console.log('✅ 修复后解析成功:', paramObj)
- } catch (e2) {
- console.error('❌ param 解析失败:', e2, '原始字符串:', paramStr)
- paramObj = {}
- }
- }
- }
- // 调用 service 接口
- const response = await request.post(
- `/service?ssServ=${service}&ssDest=data`,
- paramObj,
- { loading: false, formData: true }
- )
- console.log('✅ service 响应:', response)
- // 处理响应数据
- if (response && response.data && response.data.clClyd) {
- const data = response.data.clClyd
- console.log('📊 clClyd 数据:', data)
- // 直接使用响应数据
- this.formData = data
- // 格式化时间字段
- if (data.kssj && window.H5FieldFormatter) {
- this.formData.kssj = window.H5FieldFormatter.formatDate(data.kssj, 'yyyy-MM-dd HH:mm:ss')
- }
- if (data.jssj && window.H5FieldFormatter) {
- this.formData.jssj = window.H5FieldFormatter.formatDate(data.jssj, 'yyyy-MM-dd HH:mm:ss')
- }
- // 转换 wpid 为物品名称
- if (data.wpid && window.getDictTranslation) {
- this.translateWpid(data.wpid)
- }
- console.log('✅ 表单数据已更新:', this.formData)
- } else {
- this.error = '未获取到数据'
- console.warn('⚠️ 响应数据中没有 clClyd 字段')
- }
- } catch (error) {
- console.error('❌ 加载数据失败:', error)
- this.error = '加载数据失败:' + (error.message || '未知错误')
- } finally {
- this.loading = false
- }
- },
- // 转换 wpid 为物品名称
- async translateWpid(wpid) {
- try {
- console.log('🔄 转换 wpid:', wpid)
- const dictCache = new Map()
- const cacheKey = `wp_${wpid}`
- // 调用字典转换
- await window.getDictTranslation(
- 'wp', // cbName
- wpid, // value
- cacheKey, // cacheKey
- dictCache, // dictCache
- () => { // updateCallback
- // 更新物品名称
- this.wpmc = dictCache.get(cacheKey) || wpid
- console.log('✅ 物品名称已更新:', this.wpmc)
- }
- )
- } catch (error) {
- console.error('❌ wpid 转换失败:', error)
- this.wpmc = wpid // 转换失败显示原值
- }
- }
- }
- })
- })
- </script>
- </body>
- </html>
|