Xurh
/
ss_dc_wechat_mini_program_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551
							<!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>变动情况3</title>
    <script src="/js/mp_base/base.js"></script>
    <style>
      [v-cloak] {
        display: none !important;
      }

      #app {
        background: #f5f5f5;
        min-height: 100vh;
        padding: 8px;
        box-sizing: border-box;
      }

      /* 新增变动详情页纯转圈加载态 by xu 2026-03-06 */
      .loading {
        min-height: 40vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .loading-spinner {
        width: 30px;
        height: 30px;
        border: 3px solid #e8f3ed;
        border-top-color: #40ac6d;
        border-radius: 50%;
        animation: page-spin 0.9s linear infinite;
      }

      @keyframes page-spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }

      .error-card,
      .summary-card,
      .list-card,
      .compare-card {
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 10px;
      }

      .error-card,
      .summary-card {
        padding: 16px;
      }

      .error-text {
        color: #ff4d4f;
        line-height: 1.6;
      }

      .summary-form,
      .compare-table {
        width: 100%;
        border-collapse: collapse;
      }

      .summary-form th,
      .compare-table th {
        width: 110px;
        color: #4b5563;
        font-weight: 600;
        text-align: left;
        vertical-align: top;
      }

      .section-title {
        padding: 14px 16px 10px;
        font-size: 15px;
        font-weight: 600;
        color: #242835;
      }

      .compare-table thead th {
        padding: 12px 10px;
        background: #f7f8fa;
        text-align: center;
        width: auto;
      }

      .compare-table tbody td,
      .compare-table tbody th,
      .summary-form td,
      .summary-form th {
        padding: 12px 10px;
        border-top: 1px solid #eef0f3;
        line-height: 1.6;
        word-break: break-all;
      }

      .compare-table tbody tr:first-child td,
      .compare-table tbody tr:first-child th,
      .summary-form tbody tr:first-child td,
      .summary-form tbody tr:first-child th {
        border-top: none;
      }

      .value-empty {
        color: #9ca3af;
      }

      .compare-col {
        width: 34%;
      }

      .label-col {
        width: 32%;
      }

      .file-link {
        color: #2563eb;
        text-decoration: underline;
      }

      .cms-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .cms-item {
        padding: 8px 10px;
        border-radius: 6px;
        background: #f7f8fa;
      }

      .desc-text {
        white-space: pre-wrap;
      }

      .image-mask {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.68);
        z-index: 1200;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
        box-sizing: border-box;
      }

      .image-dialog {
        width: 100%;
        max-width: 720px;
        max-height: 88vh;
        background: #fff;
        border-radius: 10px;
        overflow: auto;
      }

      .image-dialog__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        border-bottom: 1px solid #eef0f3;
      }

      .image-dialog__title {
        font-size: 14px;
        font-weight: 600;
        color: #242835;
      }

      .image-dialog__close {
        border: none;
        background: transparent;
        font-size: 20px;
        color: #6b7280;
      }

      .image-compare {
        display: flex;
        gap: 10px;
        padding: 12px;
        box-sizing: border-box;
      }

      .image-panel {
        flex: 1;
        min-width: 0;
      }

      .image-label {
        margin-bottom: 8px;
        font-size: 13px;
        color: #4b5563;
        text-align: center;
      }

      .image-preview {
        width: 100%;
        min-height: 180px;
        background: #f7f8fa;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }

      .image-preview img {
        width: 100%;
        height: auto;
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <div v-if="loading" class="loading">
        <div class="loading-spinner"></div>
      </div>

      <div v-else-if="error" class="error-card">
        <div class="error-text">{{ error }}</div>
      </div>

      <!-- 新增变动详情摘要卡片 by xu 2026-03-06 -->
      <div v-else-if="showSummaryOnly" class="summary-card">
        <table class="summary-form">
          <tr>
            <th>变动类型</th>
            <td>{{ summaryData.bdlb || pageParams.bdlbm || '-' }}</td>
          </tr>
          <tr>
            <th>申报名称</th>
            <td>{{ summaryData.mc || '-' }}</td>
          </tr>
          <tr>
            <th>申报描述</th>
            <td class="desc-text">{{ summaryData.ms || '-' }}</td>
          </tr>
        </table>
      </div>

      <!-- 新增变动详情对比表 by xu 2026-03-06 -->
      <div v-else class="list-card">
        <div class="section-title">变动属性对比</div>
        <table class="compare-table">
          <thead>
            <tr>
              <th class="label-col">字段</th>
              <th class="compare-col">变动后</th>
              <th class="compare-col">变动前</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in displayList" :key="`${index}-${item.desc || ''}`">
              <th>{{ item.desc || '-' }}</th>
              <td>
                <template v-if="item.renderType === 'cms'">
                  <div class="cms-list">
                    <div v-for="(child, childIndex) in item.newCmsList" :key="`new-${childIndex}`" class="cms-item">
                      {{ child || '（无）' }}
                    </div>
                    <div v-if="!item.newCmsList.length" class="value-empty">（无）</div>
                  </div>
                </template>
                <template v-else-if="item.renderType === 'image'">
                  <span
                    class="file-link"
                    v-if="item.newDisplay && item.newDisplay !== '（无）'"
                    @click="openImageCompare(item)"
                  >{{ item.newDisplay }}</span>
                  <span v-else class="value-empty">（无）</span>
                </template>
                <template v-else>
                  <span :class="{ 'value-empty': !item.newDisplay || item.newDisplay === '（无）' }">{{ item.newDisplay || '（无）' }}</span>
                </template>
              </td>
              <td>
                <template v-if="item.renderType === 'cms'">
                  <div class="cms-list">
                    <div v-for="(child, childIndex) in item.oldCmsList" :key="`old-${childIndex}`" class="cms-item">
                      {{ child || '（无）' }}
                    </div>
                    <div v-if="!item.oldCmsList.length" class="value-empty">（无）</div>
                  </div>
                </template>
                <template v-else-if="item.renderType === 'image'">
                  <span
                    class="file-link"
                    v-if="item.oldDisplay && item.oldDisplay !== '（无）'"
                    @click="openImageCompare(item)"
                  >{{ item.oldDisplay }}</span>
                  <span v-else class="value-empty">（无）</span>
                </template>
                <template v-else>
                  <span :class="{ 'value-empty': !item.oldDisplay || item.oldDisplay === '（无）' }">{{ item.oldDisplay || '（无）' }}</span>
                </template>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div v-if="imagePreview.visible" class="image-mask" @click="closeImageCompare">
        <div class="image-dialog" @click.stop>
          <div class="image-dialog__head">
            <span class="image-dialog__title">图片对比</span>
            <button class="image-dialog__close" type="button" @click="closeImageCompare">×</button>
          </div>
          <div class="image-compare">
            <div class="image-panel">
              <div class="image-label">变动后</div>
              <div class="image-preview">
                <img v-if="imagePreview.newUrl" :src="imagePreview.newUrl" alt="new" />
                <span v-else class="value-empty">（无）</span>
              </div>
            </div>
            <div class="image-panel">
              <div class="image-label">变动前</div>
              <div class="image-preview">
                <img v-if="imagePreview.oldUrl" :src="imagePreview.oldUrl" alt="old" />
                <span v-else class="value-empty">（无）</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      window.SS.ready(function () {
        window.SS.dom.initializeFormApp({
          el: '#app',
          data() {
            return {
              pageParams: {},
              loading: false,
              error: '',
              rawData: {},
              displayList: [],
              summaryData: {
                bdlb: '',
                mc: '',
                ms: '',
              },
              imagePreview: {
                visible: false,
                newUrl: '',
                oldUrl: '',
              },
            };
          },
          computed: {
            showSummaryOnly() {
              return ['51', '55'].includes(String(this.pageParams.bdlbm || this.rawData.bdlbm || ''));
            },
          },
          mounted() {
            this.pageParams = this.getUrlParams();
            this.loadData();
          },
          methods: {
            getUrlParams() {
              const params = {};
              const urlSearchParams = new URLSearchParams(window.location.search);
              for (const [key, value] of urlSearchParams) {
                try {
                  params[key] = decodeURIComponent(value);
                } catch (_) {
                  params[key] = String(value);
                }
              }
              return params;
            },

            parseParamObject(paramStr) {
              if (!paramStr) return {};
              if (typeof paramStr === 'object') return paramStr;
              try {
                return JSON.parse(paramStr);
              } catch (_) {
                try {
                  return JSON.parse(
                    String(paramStr)
                      .replace(/([{,]\s*)([A-Za-z0-9_]+)\s*:/g, '$1"$2":')
                      .replace(/'/g, '"')
                  );
                } catch (error) {
                  console.error('解析param失败:', error);
                  return {};
                }
              }
            },

            async loadData() {
              // 加载变动详情并转成移动端对比结构 by xu 2026-03-06
              this.loading = true;
              this.error = '';
              try {
                const service = String(this.pageParams.service || this.pageParams.ssServ || 'selChgInfo').trim();
                const dest = String(this.pageParams.dest || this.pageParams.ssDest || 'chgList').trim();
                const requestData = {
                  ...this.parseParamObject(this.pageParams.param),
                };
                if (!requestData.sqid && this.pageParams.sqid) requestData.sqid = this.pageParams.sqid;
                if (!requestData.ssObjId && this.pageParams.ssObjId) requestData.ssObjId = this.pageParams.ssObjId;
                if (!requestData.ssObjName && this.pageParams.ssObjName) requestData.ssObjName = this.pageParams.ssObjName;
                if (!requestData.bdlbm && this.pageParams.bdlbm) requestData.bdlbm = this.pageParams.bdlbm;

                const response = await request.post(
                  `/service?ssServ=${encodeURIComponent(service)}&ssDest=${encodeURIComponent(dest)}`,
                  requestData,
                  { loading: false, formData: true }
                );
                const data = response && response.data ? response.data : response;
                this.rawData = data || {};
                await this.buildSummaryData(data || {});
                await this.buildDisplayList(data || {});
              } catch (error) {
                console.error('加载变动详情失败:', error);
                this.error = (error && error.message) || '加载失败，请稍后重试';
              } finally {
                this.loading = false;
              }
            },

            async buildSummaryData(data) {
              const bdlbm = String(this.pageParams.bdlbm || data.bdlbm || '');
              this.summaryData = {
                bdlb: await this.translateDict('bdlb', bdlbm, bdlbm),
                mc: data.sq && data.sq.mc ? data.sq.mc : '',
                ms: this.normalizeDesc(data.sq && (data.sq.ms || data.sq.mswj) ? (data.sq.ms || data.sq.mswj) : ''),
              };
            },

            async buildDisplayList(data) {
              const list = Array.isArray(data.bdList) ? data.bdList : [];
              const result = [];
              for (let i = 0; i < list.length; i += 1) {
                const item = list[i] || {};
                const renderType = this.resolveRenderType(item);
                const nextItem = {
                  desc: item.desc || item.field?.desc || item.name || '',
                  renderType,
                  newDisplay: await this.formatCompareValue(item, item.newVal),
                  oldDisplay: await this.formatCompareValue(item, item.origVal),
                  newPath: item.newVal || '',
                  oldPath: item.origVal || '',
                  newCmsList: this.extractCmsNames(item, 'newVal'),
                  oldCmsList: this.extractCmsNames(item, 'origVal'),
                };
                result.push(nextItem);
              }
              this.displayList = result;
            },

            resolveRenderType(item) {
              const type = String(item && item.type !== undefined ? item.type : '');
              if (['5', '6'].includes(type)) return 'image';
              if (type === '9') return 'cms';
              return 'text';
            },

            extractCmsNames(item) {
              const list = Array.isArray(item && item.cmsChgList) ? item.cmsChgList : [];
              return list.map((child) => {
                const newVal = child && child.newVal && child.newVal.mc ? child.newVal.mc : '';
                const oldVal = child && child.origVal && child.origVal.mc ? child.origVal.mc : '';
                return newVal || oldVal || '';
              }).filter(Boolean);
            },

            async formatCompareValue(item, value) {
              if (value === undefined || value === null || value === '') return '（无）';
              if (item && item.cbName) {
                return this.translateDict(item.cbName, value, String(value));
              }
              const type = String(item && item.type !== undefined ? item.type : '');
              if (type === '8') return '查看对比';
              if (type === '9') return '查看内容';
              if (['5', '6'].includes(type)) return this.extractFileName(value);
              if ((type === '3' || type === '11' || item.fmt) && window.H5FieldFormatter) {
                return window.H5FieldFormatter.formatDate(value, item.fmt || 'YYYY-MM-DD HH:mm:ss') || String(value);
              }
              return this.normalizeDesc(String(value));
            },

            extractFileName(path) {
              if (!path) return '（无）';
              const parts = String(path).split('/');
              return parts[parts.length - 1] || String(path);
            },

            normalizeDesc(value) {
              if (!value) return '';
              return String(value)
                .replace(/<br\s*\/?\>/gi, '\n')
                .replace(/<[^>]+>/g, '')
                .trim();
            },

            async translateDict(dictName, value, fallbackName) {
              if (fallbackName && String(fallbackName).trim() && dictName === 'bdlb' && String(fallbackName) !== String(value)) {
                return fallbackName;
              }
              if (value === undefined || value === null || value === '') return '';
              try {
                if (typeof window.getDictOptions === 'function') {
                  const options = await window.getDictOptions(dictName);
                  const target = (options || []).find((item) => String(item.v) === String(value));
                  if (target && target.n) return target.n;
                }
              } catch (error) {
                console.error(`${dictName} 字典翻译失败:`, error);
              }
              return fallbackName || String(value);
            },

            buildImageUrl(path) {
              if (!path) return '';
              if (typeof window.getImageUrl === 'function') {
                return window.getImageUrl(path);
              }
              return `/service?ssServ=dlByHttp&type=img&path=${encodeURIComponent(path)}`;
            },

            openImageCompare(item) {
              this.imagePreview = {
                visible: true,
                newUrl: this.buildImageUrl(item.newPath),
                oldUrl: this.buildImageUrl(item.oldPath),
              };
            },

            closeImageCompare() {
              this.imagePreview.visible = false;
            },
          },
        });
      });
    </script>
  </body>
</html>