cbjsxt-front-master/src/views/costAudit/baseInfo/costFormManage/infoMaintain.vue

<template>
  <div>
    <div class="top-wrapper">
      <el-button plain type="primary" icon="el-icon-back" @click="handleBack">
        返回
      </el-button>
      <div class="title ml20">{{ surveyTemplateName }}内容维护</div>
    </div>
    <!-- 搜索面板 -->
    <div class="search-panel mt20">
      <el-form :inline="true" :model="searchForm" label-width="80px">
        <el-form-item label="状态：">
          <el-select
            v-model="searchForm.status"
            placeholder="请选择状态"
            style="width: 180px"
          >
            <el-option label="全部" value=""></el-option>
            <el-option label="草稿" value="-1"></el-option>
            <el-option label="现行版本" value="0"></el-option>
            <el-option label="历史版本" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">
            查询
          </el-button>
          <el-button
            plain
            type="primary"
            icon="el-icon-refresh"
            @click="handleReset"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作栏 -->
    <div class="operation-bar">
      <!-- v-region-permission="{ category: 'costFormManage', action: 'add' }" -->
      <el-button
        plain
        type="success"
        icon="el-icon-circle-plus"
        @click="handleAdd"
      >
        添加
      </el-button>
      <!-- v-region-permission="{
          category: 'costFormManage',
          action: 'delete',
        }" -->
      <el-button
        plain
        type="danger"
        icon="el-icon-delete"
        :disabled="selectedRows.length === 0"
        @click="handleBatchDelete"
      >
        批量删除
      </el-button>
    </div>

    <!-- 表格 -->
    <div class="table-container">
      <CostAuditTable
        ref="costAuditTable"
        :table-data="tableData"
        :columns="tableColumns"
        :show-selection="true"
        :show-index="true"
        :show-pagination="true"
        :pagination="pagination"
        :loading="loading"
        @selection-change="handleSelectionChange"
        @pagination-change="handlePaginationChange"
      >
        <!-- 创建时间自定义单元格 -->
        <template #createTime="{ row }">
          <div>{{ row.createTime ? row.createTime.split(' ')[0] : '-' }}</div>
          <div>{{ row.createTime ? row.createTime.split(' ')[1] : '-' }}</div>
        </template>

        <!-- 操作列 -->
        <template #action="{ row }">
          <!-- v-region-permission="{
              category: 'costFormManage',
              action: 'view',
            }" -->
          <el-button type="text" size="small" @click="handleViewDetail(row)">
            详情
          </el-button>
          <!-- v-if="row.status === '-1'"
            v-region-permission="{
              category: 'costFormManage',
              action: 'edit',
            }" -->
          <el-button
            v-if="row.status != '0'"
            type="text"
            size="small"
            @click="handleEdit(row)"
          >
            修改
          </el-button>
          <!-- v-region-permission="{
              category: 'costFormManage',
              action: 'delete',
              targetData: row,
            }" -->
          <el-button
            v-if="row.status != '0'"
            class="delete-btn"
            type="text"
            size="small"
            @click="handleDelete(row)"
          >
            删除
          </el-button>
          <!-- v-region-permission="{
              category: 'costFormManage',
              action: 'edit',
            }" -->
          <el-button
            v-if="row.status === '-1'"
            type="text"
            size="small"
            @click="handleEditContent(row)"
          >
            内容维护
          </el-button>
          <!-- v-region-permission="{
              category: 'costFormManage',
              action: 'edit',
            }" -->
          <el-button
            v-if="row.status === '-1'"
            type="text"
            size="small"
            @click="handleStatus(row)"
          >
            启用
          </el-button>
          <!-- v-region-permission="{
              category: 'costFormManage',
              action: 'edit',
            }" -->
          <el-button
            v-if="row.status === '0'"
            type="text"
            size="small"
            @click="handleStatus(row)"
          >
            停用
          </el-button>
        </template>
      </CostAuditTable>
    </div>

    <!-- 详情弹窗 -->
    <el-dialog title="详情" :visible.sync="detailDialogVisible" width="800px">
      <el-form :model="detailForm" label-width="120px" class="detail-form">
        <el-form-item label="ID：">{{ detailForm.id }}</el-form-item>
        <el-form-item label="版本号：">{{ detailForm.versionNo }}</el-form-item>
        <el-form-item label="状态：">
          {{ forStatus(detailForm.status) }}
        </el-form-item>
        <el-form-item label="创建人：">{{ detailForm.createBy }}</el-form-item>
        <el-form-item label="创建时间：">
          {{ detailForm.createTime }}
        </el-form-item>
        <el-form-item label="备注：">{{ detailForm.remarks }}</el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 添加/修改弹窗 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="650px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="dataForm"
        :model="dataForm"
        :rules="dataFormRules"
        label-width="120px"
        class="data-form"
      >
        <el-form-item label="创建人" prop="createBy">
          <el-input
            v-model="dataForm.createBy"
            placeholder="请输入创建人"
            maxlength="30"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-date-picker
            v-model="dataForm.createTime"
            type="datetime"
            placeholder="选择日期时间"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="dataForm.remarks"
            type="textarea"
            placeholder="请输入备注"
            rows="3"
            maxlength="500"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>

    <!-- 内容修改弹窗 -->
    <el-dialog
      title="内容维护"
      :visible.sync="contentEditDialogVisible"
      width="75%"
      class="content-edit-dialog"
      :close-on-click-modal="false"
    >
      <div class="content-edit-container">
        <div class="table-header-info">
          <div class="table-name">
            调查表名称：{{ contentEditForm.tableName }}
          </div>
          <div class="table-style">
            表单样式：
            <el-radio-group
              v-model="contentEditForm.templateType"
              @change="handleFormStyleChange"
            >
              <el-radio v-if="contentEditForm.templateType === '1'" label="1">
                单记录
              </el-radio>
              <el-radio v-if="contentEditForm.templateType === '2'" label="2">
                固定表
              </el-radio>
              <el-radio v-if="contentEditForm.templateType === '3'" label="3">
                动态表
              </el-radio>
            </el-radio-group>
          </div>
          <div v-if="viewDetail" class="detail-info-container">
            <div class="detail-item">
              <span class="detail-label">版本号：</span>
              <span class="detail-value">{{ detailForm.versionNo }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">状态：</span>
              <span class="detail-value">
                {{ forStatus(detailForm.status) }}
              </span>
            </div>
            <div class="detail-item">
              <span class="detail-label">创建人：</span>
              <span class="detail-value">{{ detailForm.createBy }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">创建时间：</span>
              <span class="detail-value">{{ detailForm.createTime }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">备注：</span>
              <span class="detail-value">{{ detailForm.remarks }}</span>
            </div>
          </div>
        </div>

        <!-- 单记录列表 -->
        <div v-if="contentEditForm.templateType === '1'">
          <div class="button-group">
            <el-button
              v-if="!viewDetail"
              type="primary"
              @click="handleAddTableHeader('单记录')"
            >
              添加项目
            </el-button>
            <el-button
              v-if="!viewDetail"
              type="primary"
              @click="handleSaveContent('单记录')"
            >
              保存
            </el-button>
          </div>
          <div class="table-edit-container">
            <el-table
              :data="contentEditForm.tableHeaders"
              border
              style="width: 100%"
            >
              <el-table-column label="序号" width="80" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="fieldName"
                label="字段名称"
                min-width="150"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.fieldName"
                    placeholder="请输入字段名称"
                    size="small"
                    :disabled="viewDetail"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="fieldType" label="字段类型" width="220">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.fieldType"
                    placeholder="请选择字段类型"
                    size="small"
                    :disabled="viewDetail"
                    @change="handleFieldTypeChange(scope.row)"
                  >
                    <el-option label="字符串" value="string"></el-option>
                    <el-option label="整数" value="integer"></el-option>
                    <el-option label="小数" value="double"></el-option>
                    <el-option label="日期" value="datetime"></el-option>
                    <el-option label="布尔值" value="boolean"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="format" label="格式" width="220">
                <template slot-scope="scope">
                  <!-- 字符串类型格式 -->
                  <div
                    v-if="scope.row.fieldType === 'string'"
                    class="format-input"
                  >
                    <span class="format-prefix">长度</span>
                    <el-input
                      v-model="scope.row.format"
                      placeholder="请输入长度"
                      size="small"
                      style="width: calc(100% - 80px)"
                      :disabled="viewDetail"
                    ></el-input>
                  </div>

                  <!-- 整数类型格式 -->
                  <div
                    v-else-if="scope.row.fieldType === 'integer'"
                    class="format-input"
                  >
                    <span class="format-prefix">整数</span>
                    <el-input
                      v-model="scope.row.fieldTypelen"
                      placeholder="整数位数"
                      size="small"
                      style="width: 80px; margin: 0 5px"
                      :disabled="viewDetail"
                    ></el-input>
                  </div>

                  <!-- 小数类型格式 -->
                  <div
                    v-else-if="scope.row.fieldType === 'double'"
                    class="format-input"
                  >
                    <span class="format-prefix">小数</span>
                    <el-input
                      v-model="scope.row.fieldTypenointlen"
                      placeholder="小数位数"
                      size="small"
                      style="width: 80px; margin-left: 5px"
                      :disabled="viewDetail"
                    ></el-input>
                  </div>

                  <!-- 日期类型格式 -->
                  <div
                    v-else-if="scope.row.fieldType === 'datetime'"
                    class="format-input"
                  >
                    <el-select
                      v-model="scope.row.format"
                      placeholder="请选择日期格式"
                      size="small"
                      style="width: 100%"
                      :disabled="viewDetail"
                    >
                      <el-option
                        label="yyyy-MM-dd HH:mm:ss"
                        value="yyyy-MM-dd HH:mm:ss"
                      ></el-option>
                      <el-option
                        label="yyyy-MM-dd"
                        value="yyyy-MM-dd"
                      ></el-option>
                    </el-select>
                  </div>
                  <!-- 布尔类型格式 -->
                  <div v-else-if="scope.row.fieldType === 'boolean'">
                    <el-select
                      v-model="scope.row.format"
                      placeholder="请选择布尔值格式"
                      size="small"
                      style="width: 100%"
                      :disabled="viewDetail"
                    >
                      <el-option label="是" value="true"></el-option>
                      <el-option label="否" value="false"></el-option>
                    </el-select>
                  </div>
                  <!-- 默认情况 -->
                  <el-input
                    v-else
                    v-model="scope.row.format"
                    :placeholder="getFormatPlaceholder(scope.row.fieldType)"
                    size="small"
                    :disabled="viewDetail"
                  ></el-input>
                </template>
              </el-table-column>

              <el-table-column prop="isRequired" label="是否必填" width="120">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.isRequired"
                    size="small"
                    :disabled="scope.row.isDisabled || viewDetail"
                  >
                    <el-option label="是" value="true"></el-option>
                    <el-option label="否" value="false"></el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column prop="showVisible" label="是否显示" width="120">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.showVisible"
                    size="small"
                    :disabled="scope.row.isDisabled || viewDetail"
                  >
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column prop="isDict" label="绑定字典" min-width="150">
                <template slot-scope="scope">
                  <div class="bind-dict-column">
                    <el-select
                      v-model="scope.row.isDict"
                      size="small"
                      style="width: 80px"
                      :disabled="scope.row.isDisabled || viewDetail"
                      @change="handleBindDictChange(scope.row)"
                    >
                      <el-option label="是" value="true"></el-option>
                      <el-option label="否" value="false"></el-option>
                    </el-select>
                    <el-select
                      v-if="scope.row.isDict === 'true'"
                      v-model="scope.row.dictCode"
                      placeholder="请选择字典"
                      class="dict-select"
                      size="small"
                      style="width: 120px; margin-top: 5px"
                      :disabled="scope.row.isDisabled || viewDetail"
                    >
                      <el-option
                        v-for="(item, index) in dictTypeList"
                        :key="index"
                        :label="item.name"
                        :value="String(item.typeKey)"
                      ></el-option>
                    </el-select>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="操作" width="150" fixed="right">
                <template slot-scope="scope">
                  <div class="table-actions">
                    <el-button
                      type="text"
                      size="mini"
                      :disabled="viewDetail"
                      class="delete-btn"
                      @click="
                        handleDeleteHeader(scope.$index, '单记录', scope.row)
                      "
                    >
                      删除
                    </el-button>
                    <el-button
                      v-if="scope.$index !== 0"
                      type="text"
                      size="mini"
                      :disabled="viewDetail"
                      @click="
                        handleMoveUp(scope.$index, '单记录表头', scope.row)
                      "
                    >
                      上升
                    </el-button>
                    <el-button
                      v-if="
                        scope.$index !== contentEditForm.tableHeaders.length - 1
                      "
                      type="text"
                      size="mini"
                      :disabled="viewDetail"
                      @click="handleMoveDown(scope.$index)"
                    >
                      下降
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 固定表时显示 -->
        <div v-if="contentEditForm.templateType === '2'">
          <div class="button-group">
            <el-button
              v-if="!viewDetail"
              type="primary"
              @click="handleAddTableHeader('固定表表头')"
            >
              添加表头
            </el-button>
            <el-button
              v-if="!viewDetail"
              type="primary"
              @click="handleSaveContent('固定表表头')"
            >
              下一步
            </el-button>
          </div>
          <div class="table-edit-container">
            <el-table
              :data="contentEditForm.fixedTable.tableHeaders"
              border
              style="width: 100%"
            >
              <el-table-column label="序号" width="80" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="fieldName"
                label="字段名称"
                min-width="150"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.fieldName"
                    placeholder="请输入字段名称"
                    size="small"
                    :disabled="scope.row.isDisabled || viewDetail"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="fieldType" label="字段类型" width="120">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.fieldType"
                    placeholder="请选择字段类型"
                    size="small"
                    :disabled="scope.row.isDisabled || viewDetail"
                    @change="handleFieldTypeChange(scope.row)"
                  >
                    <el-option label="字符串" value="string"></el-option>
                    <el-option label="整数" value="integer"></el-option>
                    <el-option label="小数" value="double"></el-option>
                    <el-option label="日期" value="datetime"></el-option>
                    <el-option label="布尔值" value="boolean"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="format" label="格式" width="220">
                <template slot-scope="scope">
                  <!-- 字符串类型格式 -->
                  <div
                    v-if="scope.row.fieldType === 'string'"
                    class="format-input"
                  >
                    <span class="format-prefix">长度</span>
                    <el-input
                      v-model="scope.row.format"
                      placeholder="请输入长度"
                      size="small"
                      style="width: calc(100% - 80px)"
                      :disabled="scope.row.isDisabled || viewDetail"
                    ></el-input>
                  </div>

                  <!-- 整数类型格式 -->
                  <div
                    v-else-if="scope.row.fieldType === 'integer'"
                    class="format-input"
                  >
                    <span class="format-prefix">整数</span>
                    <el-input
                      v-model="scope.row.fieldTypelen"
                      placeholder="整数位数"
                      size="small"
                      style="width: 80px; margin: 0 5px"
                      :disabled="scope.row.isDisabled || viewDetail"
                    ></el-input>
                  </div>

                  <!-- 小数类型格式 -->
                  <div
                    v-else-if="scope.row.fieldType === 'double'"
                    class="format-input"
                  >
                    <span class="format-prefix">小数</span>
                    <el-input
                      v-model="scope.row.fieldTypenointlen"
                      placeholder="小数位数"
                      size="small"
                      style="width: 80px; margin-left: 5px"
                      :disabled="scope.row.isDisabled || viewDetail"
                    ></el-input>
                  </div>
                  <!-- 日期类型格式 -->
                  <div
                    v-else-if="scope.row.fieldType === 'datetime'"
                    class="format-input"
                  >
                    <el-select
                      v-model="scope.row.format"
                      placeholder="请选择日期格式"
                      size="small"
                      style="width: 100%"
                      :disabled="scope.row.isDisabled"
                    >
                      <el-option
                        label="yyyy-MM-dd HH:mm:ss"
                        value="yyyy-MM-dd HH:mm:ss"
                      ></el-option>
                      <el-option
                        label="yyyy-MM-dd"
                        value="yyyy-MM-dd"
                      ></el-option>
                    </el-select>
                  </div>
                  <!-- 布尔类型格式 -->
                  <div v-else-if="scope.row.fieldType === 'boolean'">
                    <el-select
                      v-model="scope.row.format"
                      placeholder="请选择布尔值格式"
                      size="small"
                      style="width: 100%"
                      :disabled="scope.row.isDisabled || viewDetail"
                    >
                      <el-option label="是" value="true"></el-option>
                      <el-option label="否" value="false"></el-option>
                    </el-select>
                  </div>
                  <!-- 默认情况 -->
                  <el-input
                    v-else
                    v-model="scope.row.format"
                    :placeholder="getFormatPlaceholder(scope.row.fieldType)"
                    size="small"
                    :disabled="scope.row.isDisabled || viewDetail"
                  ></el-input>
                </template>
              </el-table-column>

              <el-table-column prop="isRequired" label="是否必填" width="120">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.isRequired"
                    size="small"
                    :disabled="scope.row.isDisabled || viewDetail"
                  >
                    <el-option label="是" value="true"></el-option>
                    <el-option label="否" value="false"></el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column prop="showVisible" label="是否显示" width="120">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.showVisible"
                    size="small"
                    :disabled="scope.row.isDisabled || viewDetail"
                  >
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column
                prop="isAuditPeriod"
                label="是否绑定监审期间"
                width="140"
              >
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.isAuditPeriod"
                    size="small"
                    :disabled="scope.row.isDisabled || viewDetail"
                  >
                    <el-option label="是" value="true"></el-option>
                    <el-option label="否" value="false"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="isDict" label="绑定字典" min-width="150">
                <template slot-scope="scope">
                  <div class="bind-dict-column">
                    <el-select
                      v-model="scope.row.isDict"
                      size="small"
                      style="width: 80px"
                      :disabled="scope.row.isDisabled || viewDetail"
                      @change="handleBindDictChange(scope.row)"
                    >
                      <el-option label="是" value="true"></el-option>
                      <el-option label="否" value="false"></el-option>
                    </el-select>
                    <el-select
                      v-if="scope.row.isDict === 'true'"
                      v-model="scope.row.dictCode"
                      placeholder="请选择字典"
                      class="dict-select"
                      size="small"
                      style="width: 120px; margin-top: 5px"
                      :disabled="scope.row.isDisabled || viewDetail"
                    >
                      <el-option
                        v-for="(item, index) in dictTypeList"
                        :key="index"
                        :label="item.name"
                        :value="String(item.typeKey)"
                      ></el-option>
                    </el-select>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150" fixed="right">
                <template slot-scope="scope">
                  <div class="table-actions">
                    <el-button
                      type="text"
                      size="mini"
                      :disabled="scope.row.isDisabled || viewDetail"
                      class="delete-btn"
                      @click="
                        handleDeleteHeader(
                          scope.$index,
                          '固定表表头',
                          scope.row
                        )
                      "
                    >
                      删除
                    </el-button>
                    <el-button
                      v-if="scope.$index !== 0"
                      type="text"
                      size="mini"
                      :disabled="scope.row.isDisabled || viewDetail"
                      @click="
                        handleMoveUp(scope.$index, '固定表表头', scope.row)
                      "
                    >
                      上升
                    </el-button>
                    <el-button
                      v-if="
                        scope.$index !== contentEditForm.tableHeaders.length - 1
                      "
                      type="text"
                      size="mini"
                      :disabled="scope.row.isDisabled || viewDetail"
                      @click="handleMoveDown(scope.$index)"
                    >
                      下降
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div>
            <div class="button-group">
              <el-button
                v-if="!viewDetail"
                type="primary"
                @click="handleAddTableHeader('固定表项目')"
              >
                添加项目
              </el-button>
              <el-button
                v-if="!viewDetail"
                type="primary"
                @click="handleSaveContent('固定表项目')"
              >
                保存
              </el-button>
            </div>
            <div class="table-edit-container">
              <el-table
                :data="contentEditForm.fixedTable.fixedTables"
                border
                style="width: 100%"
                row-key="rowid"
                default-expand-all
                :tree-props="{
                  children: 'children',
                  hasChildren: 'hasChildren',
                }"
                @selection-change="handleSelectionChange"
              >
                <el-table-column label="父子节点" align="center" width="100">
                  <template slot-scope="scope">
                    <el-tag
                      v-if="
                        scope.row.isChild ||
                        scope.row.isSubItem ||
                        (scope.row.parentid &&
                          scope.row.parentid != -1 &&
                          scope.row.parentid != '-1')
                      "
                      type="success"
                      size="small"
                    >
                      子项
                    </el-tag>
                    <el-tag
                      v-else-if="
                        scope.row.parentid === -1 ||
                        scope.row.parentid === '-1' ||
                        !scope.row.parentid
                      "
                      type="primary"
                      size="small"
                    >
                      父项
                    </el-tag>
                    <el-tag v-else type="info" size="small">无</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="序号" width="120" align="center">
                  <template slot-scope="scope">
                    <el-input
                      :value="
                        scope.row.fixedValues
                          ? scope.row.fixedValues['序号']
                          : ''
                      "
                      size="small"
                      placeholder="数字或中文"
                      :disabled="viewDetail"
                      style="flex: 1; margin: 0"
                      @input="handleFixedValueChange(scope.row, '序号', $event)"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  v-for="(item, index) in contentEditForm.fixedTable
                    .fixedTableHeaders"
                  :key="index"
                  :label="item.rkey"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-input
                      :value="
                        scope.row.fixedValues
                          ? scope.row.fixedValues[item.rkey]
                          : ''
                      "
                      size="small"
                      :disabled="viewDetail"
                      @input="
                        handleFixedValueChange(scope.row, item.rkey, $event)
                      "
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="指标编号" width="100" align="center">
                  <template slot-scope="scope">
                    <el-input
                      :value="scope.row.cellCode"
                      size="small"
                      :disabled="viewDetail"
                      @input="(val) => $set(scope.row, 'cellCode', val)"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="计算公式" width="100" align="center">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.calculationFormula"
                      size="small"
                      readonly
                      :disabled="viewDetail"
                      @click.native="
                        openCalculationFormulaDialogVisible(
                          scope.row,
                          scope.$index
                        )
                      "
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="单位" width="100" align="center">
                  <template slot-scope="scope">
                    <el-input
                      :value="scope.row.unit"
                      size="small"
                      :disabled="viewDetail"
                      @input="(val) => $set(scope.row, 'unit', val)"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" fixed="right">
                  <template slot-scope="scope">
                    <div class="table-actions">
                      <el-button
                        v-if="!scope.row.isChild"
                        type="text"
                        size="mini"
                        :disabled="viewDetail"
                        @click="
                          handleAddChildItem(
                            scope.$index,
                            '固定表项目',
                            scope.row
                          )
                        "
                      >
                        添加子项
                      </el-button>
                      <el-button
                        type="text"
                        size="mini"
                        :disabled="viewDetail"
                        class="delete-btn"
                        @click="
                          handleDeleteHeader(
                            scope.$index,
                            '固定表项目',
                            scope.row
                          )
                        "
                      >
                        删除
                      </el-button>
                      <el-button
                        v-if="scope.$index !== 0"
                        type="text"
                        size="mini"
                        :disabled="viewDetail"
                        @click="handleMoveUp(scope.$index, '固定表', scope.row)"
                      >
                        上升
                      </el-button>
                      <el-button
                        v-if="
                          scope.$index !==
                          contentEditForm.fixedTable.fixedTables.length - 1
                        "
                        type="text"
                        size="mini"
                        :disabled="viewDetail"
                        @click="
                          handleMoveDown(scope.$index, '固定表', scope.row)
                        "
                      >
                        下降
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <!-- 动态表时显示 -->
        <div v-if="contentEditForm.templateType === '3'">
          <div class="button-group">
            <el-button
              v-if="!viewDetail"
              type="primary"
              @click="handleAddTableHeader('动态表表头')"
            >
              添加表头
            </el-button>
            <el-button
              v-if="!viewDetail"
              type="primary"
              @click="handleSaveContent('动态表表头')"
            >
              下一步
            </el-button>
          </div>
          <div class="table-edit-container">
            <el-table
              :data="contentEditForm.dynamicTable.tableHeaders"
              border
              style="width: 100%"
            >
              <el-table-column label="序号" width="80" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="fieldName"
                label="字段名称"
                min-width="150"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.fieldName"
                    placeholder="请输入字段名称"
                    size="small"
                    :disabled="scope.row.isDisabled || viewDetail"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="fieldType" label="字段类型" width="120">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.fieldType"
                    placeholder="请选择字段类型"
                    size="small"
                    :disabled="scope.row.isDisabled || viewDetail"
                    @change="handleFieldTypeChange(scope.row)"
                  >
                    <el-option label="字符串" value="string"></el-option>
                    <el-option label="整数" value="integer"></el-option>
                    <el-option label="小数" value="double"></el-option>
                    <el-option label="日期" value="datetime"></el-option>
                    <el-option label="布尔值" value="boolean"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="format" label="格式" width="220">
                <template slot-scope="scope">
                  <!-- 字符串类型格式 -->
                  <div
                    v-if="scope.row.fieldType === 'string'"
                    class="format-input"
                  >
                    <span class="format-prefix">长度</span>
                    <el-input
                      v-model="scope.row.format"
                      placeholder="请输入长度"
                      size="small"
                      style="width: calc(100% - 80px)"
                      :disabled="scope.row.isDisabled || viewDetail"
                    ></el-input>
                  </div>

                  <!-- 整数类型格式 -->
                  <div
                    v-else-if="scope.row.fieldType === 'integer'"
                    class="format-input"
                  >
                    <span class="format-prefix">整数</span>
                    <el-input
                      v-model="scope.row.fieldTypelen"
                      placeholder="整数位数"
                      size="small"
                      style="width: 80px; margin: 0 5px"
                      :disabled="scope.row.isDisabled || viewDetail"
                    ></el-input>
                  </div>

                  <!-- 小数类型格式 -->
                  <div
                    v-else-if="scope.row.fieldType === 'double'"
                    class="format-input"
                  >
                    <span class="format-prefix">小数</span>
                    <el-input
                      v-model="scope.row.fieldTypenointlen"
                      placeholder="小数位数"
                      size="small"
                      style="width: 80px; margin-left: 5px"
                      :disabled="scope.row.isDisabled || viewDetail"
                    ></el-input>
                  </div>

                  <!-- 日期类型格式 -->
                  <div
                    v-else-if="scope.row.fieldType === 'datetime'"
                    class="format-input"
                  >
                    <el-select
                      v-model="scope.row.format"
                      placeholder="请选择日期格式"
                      size="small"
                      style="width: 100%"
                      :disabled="scope.row.isDisabled || viewDetail"
                    >
                      <el-option
                        label="yyyy-MM-dd HH:mm:ss"
                        value="yyyy-MM-dd HH:mm:ss"
                      ></el-option>
                      <el-option
                        label="yyyy-MM-dd"
                        value="yyyy-MM-dd"
                      ></el-option>
                    </el-select>
                  </div>
                  <!-- 布尔类型格式 -->
                  <div v-else-if="scope.row.fieldType === 'boolean'">
                    <el-select
                      v-model="scope.row.format"
                      placeholder="请选择布尔值格式"
                      size="small"
                      style="width: 100%"
                      :disabled="scope.row.isDisabled || viewDetail"
                    >
                      <el-option label="是" value="true"></el-option>
                      <el-option label="否" value="false"></el-option>
                    </el-select>
                  </div>
                  <!-- 默认情况 -->
                  <el-input
                    v-else
                    v-model="scope.row.format"
                    :placeholder="getFormatPlaceholder(scope.row.fieldType)"
                    size="small"
                    :disabled="scope.row.isDisabled || viewDetail"
                  ></el-input>
                </template>
              </el-table-column>

              <el-table-column prop="isRequired" label="是否必填" width="120">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.isRequired"
                    size="small"
                    :disabled="scope.row.isDisabled || viewDetail"
                  >
                    <el-option label="是" value="true"></el-option>
                    <el-option label="否" value="false"></el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column prop="showVisible" label="是否显示" width="120">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.showVisible"
                    size="small"
                    :disabled="scope.row.isDisabled || viewDetail"
                  >
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="isDict" label="绑定字典" min-width="150">
                <template slot-scope="scope">
                  <div class="bind-dict-column">
                    <el-select
                      v-model="scope.row.isDict"
                      size="small"
                      style="width: 80px"
                      :disabled="scope.row.isDisabled || viewDetail"
                      @change="handleBindDictChange(scope.row)"
                    >
                      <el-option label="是" value="true"></el-option>
                      <el-option label="否" value="false"></el-option>
                    </el-select>
                    <el-select
                      v-if="scope.row.isDict === 'true'"
                      v-model="scope.row.dictCode"
                      placeholder="请选择字典"
                      class="dict-select"
                      size="small"
                      style="width: 120px; margin-top: 5px"
                      :disabled="scope.row.isDisabled || viewDetail"
                    >
                      <el-option
                        v-for="(item, index) in dictTypeList"
                        :key="index"
                        :label="item.name"
                        :value="String(item.typeKey)"
                      ></el-option>
                    </el-select>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150" fixed="right">
                <template slot-scope="scope">
                  <div class="table-actions">
                    <el-button
                      type="text"
                      size="mini"
                      :disabled="scope.row.isDisabled || viewDetail"
                      class="delete-btn"
                      @click="
                        handleDeleteHeader(
                          scope.$index,
                          '动态表表头',
                          scope.row
                        )
                      "
                    >
                      删除
                    </el-button>
                    <el-button
                      v-if="scope.$index !== 0"
                      type="text"
                      size="mini"
                      :disabled="scope.row.isDisabled || viewDetail"
                      @click="
                        handleMoveUp(scope.$index, '动态表表头', scope.row)
                      "
                    >
                      上升
                    </el-button>
                    <el-button
                      v-if="
                        scope.$index !== contentEditForm.tableHeaders.length - 1
                      "
                      type="text"
                      size="mini"
                      :disabled="scope.row.isDisabled || viewDetail"
                      @click="handleMoveDown(scope.$index)"
                    >
                      下降
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div>
            <div class="button-group">
              <el-button
                v-if="!viewDetail"
                type="primary"
                @click="handleAddTableHeader('动态表项目')"
              >
                添加项目
              </el-button>
              <el-button
                v-if="!viewDetail"
                type="primary"
                @click="handleSaveContent('动态表项目')"
              >
                保存
              </el-button>
            </div>
            <div class="table-edit-container">
              <el-table
                :data="contentEditForm.dynamicTable.dynamicTables"
                border
                style="width: 100%"
                row-key="rowid"
                default-expand-all
                :tree-props="{
                  children: 'children',
                  hasChildren: 'hasChildren',
                }"
                @selection-change="handleSelectionChange"
              >
                <el-table-column label="父子节点" align="center" width="100">
                  <template slot-scope="scope">
                    <el-tag
                      v-if="
                        scope.row.isChild ||
                        scope.row.isSubItem ||
                        (scope.row.parentid &&
                          scope.row.parentid != -1 &&
                          scope.row.parentid != '-1')
                      "
                      type="success"
                      size="small"
                    >
                      子项
                    </el-tag>
                    <el-tag
                      v-else-if="
                        scope.row.parentid === -1 ||
                        scope.row.parentid === '-1' ||
                        !scope.row.parentid
                      "
                      type="primary"
                      size="small"
                    >
                      父项
                    </el-tag>
                    <el-tag v-else type="info" size="small">无</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="序号" width="120" align="center">
                  <template slot-scope="scope">
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        min-height: 32px;
                      "
                    >
                      <el-input
                        :value="
                          scope.row.dynamicValues
                            ? scope.row.dynamicValues['序号']
                            : ''
                        "
                        size="small"
                        placeholder="数字或中文"
                        :disabled="viewDetail"
                        style="flex: 1; margin: 0"
                        @input="
                          handleDynamicValueChange(scope.row, '序号', $event)
                        "
                      ></el-input>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column
                  v-for="(item, index) in contentEditForm.dynamicTable
                    .dynamicTableHeaders"
                  :key="index"
                  :label="item.rkey"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-input
                      :value="
                        scope.row.dynamicValues
                          ? scope.row.dynamicValues[item.rkey]
                          : ''
                      "
                      size="small"
                      :disabled="viewDetail"
                      @input="
                        handleDynamicValueChange(scope.row, item.rkey, $event)
                      "
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  fixed="right"
                  width="200"
                >
                  <template slot-scope="scope">
                    <div class="table-actions">
                      <el-button
                        v-if="!scope.row.isChild"
                        type="text"
                        size="mini"
                        :disabled="viewDetail"
                        @click="
                          handleAddChildItem(
                            scope.$index,
                            '动态表项目',
                            scope.row
                          )
                        "
                      >
                        添加子项
                      </el-button>
                      <el-button
                        type="text"
                        size="mini"
                        :disabled="viewDetail"
                        class="delete-btn"
                        @click="
                          handleDeleteHeader(
                            scope.$index,
                            '动态表项目',
                            scope.row
                          )
                        "
                      >
                        删除
                      </el-button>
                      <el-button
                        v-if="scope.$index !== 0"
                        type="text"
                        size="mini"
                        :disabled="viewDetail"
                        @click="handleMoveUp(scope.$index, '动态表', scope.row)"
                      >
                        上升
                      </el-button>
                      <el-button
                        v-if="
                          scope.$index !==
                          contentEditForm.tableHeaders.length - 1
                        "
                        type="text"
                        size="mini"
                        :disabled="viewDetail"
                        @click="
                          handleMoveDown(scope.$index, '动态表', scope.row)
                        "
                      >
                        下降
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="计算公式"
      :visible.sync="calculationFormulaDialogVisible"
      width="500px"
      :before-close="handleDialogClose"
      :close-on-click-modal="false"
    >
      <!-- 单选按钮组：切换“当前指标项”/“其他模板指标项” -->
      <el-radio-group
        v-model="radioType"
        class="mb20"
        @change="handleRadioChange"
      >
        <el-radio label="current">当前指标项</el-radio>
        <el-radio label="other">其他模板指标项</el-radio>
      </el-radio-group>

      <!-- 「当前指标项」内容区域 -->
      <div v-if="radioType === 'current'" class="current-panel">
        <el-input
          v-model="formulaText"
          type="textarea"
          rows="4"
          placeholder="请输入公式（如 C1+C2+C3）"
        />
      </div>

      <!-- 「其他模板指标项」内容区域 -->
      <div v-else class="other-panel">
        <span>版本号：</span>
        <el-select
          v-model="selectedTemplateId"
          placeholder="请选择版本号"
          @change="handleTemplateChange"
        >
          <el-option
            v-for="(item, index) in templateList"
            :key="index"
            :label="item.versionNo"
            :value="item.pkVal"
          ></el-option>
        </el-select>

        <!-- 指标表格 -->
        <el-table
          ref="indicatorTable"
          :data="indicatorTableData"
          border
          style="width: 100%; margin-top: 10px"
          @row-click="handleRowClick"
        >
          <el-table-column label="选择" width="60">
            <template #default="scope">
              <el-checkbox
                v-model="scope.row.checked"
                @change="handleCheckboxChange(scope.row)"
                @click.stop
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            label="指标编号"
            prop="cellCode"
            align="center"
          ></el-table-column>
          <!--循环表头 -->
          <el-table-column
            v-for="(item, index) in indicatorTableHeaders"
            :key="index"
            :label="item.rkey"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{
                scope.row.fixedValues ? scope.row.fixedValues[item.rkey] : ''
              }}
            </template>
          </el-table-column>
        </el-table>
        <el-input
          v-model="formulaText"
          type="textarea"
          rows="4"
          placeholder="请输入公式（如 C1+C2+C3）"
          @input="handleFormulaTextChange"
        />
      </div>

      <!-- 弹窗底部按钮 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleConfirm">确定</el-button>
          <el-button @click="calculationFormulaDialogVisible = false">
            取消
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  // 导入API模块
  import {
    getCostFormList,
    addCostForm,
    editCostForm,
    deleteCostForm,
    getDataStorageTableOptions,
  } from '@/api/costFormManage'
  import CostAuditTable from '@/components/costAudit/CostAuditTable.vue'
  import { getDictTypList } from '@/api/dictionaryManage.js'
  import {
    listByTemplateIdAndVersion,
    getCellCodesByTemplateId,
  } from '@/api/costSurveyTemplateItems'
  import {
    addSurveyTemplateVersion,
    delSurveyTemplateVersionById,
    putSurveyTemplatePublishVersion,
    getCostSurveyTemplateVersionsByTemplateId,
    batchDeleteCostForm,
  } from '@/api/costSurveyTemplateVersion'
  import { getListFixedEnabled } from '@/api/costSurveyTemplate'
  import { listByCurrentTemplateId } from '@/api/catalogManage.js'
  import {
    getListBySurveyTemplateId,
    getListBySurveyTemplateIdAndVersion,
    getBatchSaveOrUpdate,
  } from '@/api/costSurveyTemplateHeaders'
  import { commonMixin } from '@/mixins/useDict'
  import { mapState } from 'vuex'
  export default {
    name: 'InfoMaintain',
    components: {
      CostAuditTable,
    },
    mixins: [commonMixin],
    data() {
      return {
        surveyTemplateName: '',
        loading: false,
        searchForm: {
          status: '',
        },
        tableData: [],
        currentRow: null,
        selectedRows: [],
        pagination: {
          currentPage: 1,
          pageSize: 50,
          total: 0, // 初始化为0
        },
        dialogVisible: false,
        detailDialogVisible: false,
        viewDetail: false,
        contentEditDialogVisible: false,
        calculationFormulaDialogVisible: false,
        currentEditingRow: null,
        currentEditingRowIndex: -1,
        radioType: 'current',
        formulaText: 'C1+C2+C3',
        templateName: '',
        templateList: [],
        indicatorTableData: [],
        indicatorTableHeaders: [],
        selectedIndicatorCodes: [],
        selectedIndicatorsPerTemplate: {},
        dialogTitle: '',
        dataForm: {
          id: null,
          version: '',
          status: '',
          createBy: '',
          createTime: '',
          remark: '',
        },
        detailForm: {
          id: null,
          version: '',
          status: '',
          createBy: '',
          createTime: '',
          remark: '',
        },
        contentEditForm: {
          tableName: '',
          templateType: '1',
          versionId: '',
          // 单记录列表
          tableHeaders: [],
          // 固定表列表
          fixedTable: {
            tableHeaders: [],
            fixedTables: [],
            fixedTablesTitle: [],
            fixedTableHeaders: [],
          },
          // 动态表列表
          dynamicTable: {
            tableHeaders: [],
            dynamicTables: [],
            dynamicTablesTitle: [],
            dynamicTableHeaders: [],
          },
          isDynamicTables: false,
          isFixedTables: false,
        },
        tableKey: 0, // 用于强制刷新表格
        dataFormRules: {
          status: [
            { required: true, message: '请选择状态', trigger: 'change' },
          ],
          createBy: [
            { required: true, message: '请输入创建人', trigger: 'blur' },
          ],
          createTime: [
            { required: true, message: '请选择创建时间', trigger: 'change' },
          ],
        },
        id: '', // 从路由获取的ID
        dataStorageTableOptions: [], // 数据存储库表选项
        surveyTemplateId: '', // 成本调查表ID
        versionId: '',
        dictTypeList: [],
      }
    },
    computed: {
      ...mapState('user', ['userInfo', 'username']),
      formatter: (status) => {
        return status === '-1' ? '草稿' : status === '0' ? '现行' : '历史'
      },
      tableColumns() {
        return [
          {
            prop: 'versionNo',
            label: '版本号',
            align: 'center',
            showOverflowTooltip: true,
          },
          {
            prop: 'status',
            label: '状态',
            align: 'center',
            formatter: (row) => {
              return row.status == '-1'
                ? '草稿'
                : row.status == '0'
                ? '现行'
                : '历史'
            },
          },
          {
            prop: 'createBy',
            label: '创建人',
            align: 'center',
          },
          {
            prop: 'createTime',
            label: '创建时间',
            showOverflowTooltip: true,
            slotName: 'createTime',
          },
          {
            prop: 'remarks',
            label: '备注',
            align: 'center',
            showOverflowTooltip: true,
          },
          {
            prop: 'action',
            width: '270',
            label: '操作',
            align: 'center',
            fixed: 'right',
            slotName: 'action',
          },
        ]
      },
    },
    watch: {
      indicatorTableData: {
        handler(newVal) {
          if (this.radioType === 'other' && this.selectedTemplateId) {
            this.$set(
              this.selectedIndicatorsPerTemplate,
              this.selectedTemplateId,
              newVal.filter((item) => item.checked)
            )
          }

          this.updateSelectedIndicatorCodes()
        },
        deep: true,
      },

      selectedIndicatorCodes: {
        handler(newVal) {
          if (this.radioType === 'other') {
            const allSelectedTemplateIds = [
              ...new Set([
                this.selectedTemplateId,
                ...Object.keys(this.selectedIndicatorsPerTemplate).filter(
                  (id) =>
                    id !== this.selectedTemplateId &&
                    this.selectedIndicatorsPerTemplate[id].some(
                      (item) => item.checked
                    )
                ),
              ]),
            ].filter((id) => id)

            const isSingleTemplate = allSelectedTemplateIds.length === 1

            if (isSingleTemplate && allSelectedTemplateIds[0]) {
              const selectedTemplate = this.templateList.find(
                (item) => item.pkVal === allSelectedTemplateIds[0]
              )
              const templateNameYw = selectedTemplate
                ? selectedTemplate.surveyTemplateNameYw ||
                  selectedTemplate.surveyTemplateName ||
                  ''
                : ''

              let selectedItems = []
              if (allSelectedTemplateIds[0] === this.selectedTemplateId) {
                selectedItems = newVal
              } else {
                selectedItems = this.selectedIndicatorsPerTemplate[
                  allSelectedTemplateIds[0]
                ]
                  .filter((item) => item.checked)
                  .map(
                    (item) => `${templateNameYw}.${item.code || item.cellCode}`
                  )
              }

              if (selectedItems.length > 0) {
                this.formulaText = selectedItems.join('+')
                this.isAutoGeneratedFormula = true
              } else if (this.isAutoGeneratedFormula) {
                this.formulaText = ''
              }
            } else {
              let allSelectedCodes = []

              if (newVal.length > 0 && this.selectedTemplateId) {
                allSelectedCodes = [...newVal]
              }

              Object.keys(this.selectedIndicatorsPerTemplate).forEach(
                (templateId) => {
                  if (templateId !== this.selectedTemplateId) {
                    const items = this.selectedIndicatorsPerTemplate[templateId]
                    const selectedTemplate = this.templateList.find(
                      (item) => item.pkVal === templateId
                    )
                    const templateName = selectedTemplate
                      ? selectedTemplate.surveyTemplateNameYw ||
                        selectedTemplate.surveyTemplateName ||
                        ''
                      : ''

                    items
                      .filter((item) => item.checked)
                      .forEach((item) => {
                        allSelectedCodes.push(
                          `${templateName}.${item.code || item.cellCode}`
                        )
                      })
                  }
                }
              )

              if (allSelectedCodes.length > 0) {
                this.formulaText = allSelectedCodes.join('+')
                this.isAutoGeneratedFormula = true
              } else if (this.isAutoGeneratedFormula) {
                this.formulaText = ''
              }
            }
          } else if (newVal.length > 0 && this.radioType === 'current') {
            if (
              !this.formulaText ||
              this.formulaText === 'C1+C2+C3' ||
              this.isAutoGeneratedFormula
            ) {
              this.formulaText = newVal.join('+')
              this.isAutoGeneratedFormula = true
            }
          } else if (newVal.length === 0 && this.radioType === 'current') {
            if (this.isAutoGeneratedFormula) {
              this.formulaText = ''
            }
          }
        },
        deep: true,
      },
    },
    mounted() {
      this.isAutoGeneratedFormula = false
    },
    methods: {
      async loadDictTypeList() {
        try {
          const res = await getDictTypList()
          this.dictTypeList = res || []
        } catch (error) {
          console.error('加载字典类型失败:', error)
        }
      },
      getTemplateRow(row) {
        this.currentRow = row
        this.surveyTemplateId = row.surveyTemplateId
        this.templateType = row.templateType
        this.contentEditForm.tableName = row.surveyTemplateName
        this.surveyTemplateName = row.surveyTemplateName
        this.contentEditForm.templateType = row.templateType
        this.handleSearch()
        this.loadDictTypeList()
      },
      handleBack() {
        this.$emit('back', 'list')
      },
      // 查询
      handleSearch() {
        this.loading = true
        const params = {
          surveyTemplateId: this.surveyTemplateId,
          status: this.searchForm.status,
          // pageNum: this.pagination.currentPage,
          // pageSize: this.pagination.pageSize,
        }

        // 根据成本调查表ID获取所有版本数据
        getCostSurveyTemplateVersionsByTemplateId(params)
          .then((response) => {
            this.tableData = response.value || []
            this.pagination.total = response.total || 0
            this.loading = false
          })
          .catch((error) => {
            console.error('查询失败:', error)
            this.loading = false
          })
      },

      // 重置
      handleReset() {
        this.searchForm = {
          status: '',
        }
        this.pagination.currentPage = 1
        this.handleSearch()
      },
      handleRowClick(row, column, event) {
        // 只有点击非 checkbox 列才触发
        if (column && column.property !== 'checked') {
          // 如果没有 cellCode，则不允许选中
          if (!row.cellCode) {
            // this.$message.warning('该数据没有指标编号，无法选择')
            return
          }

          // 切换选中状态
          this.toggleRowSelection(row)
        }
      },
      toggleRowSelection(row) {
        // 切换选中状态
        this.$set(row, 'checked', !row.checked)

        // 格式化代码并存储在行数据中
        if (row.checked) {
          this.formatRowCode(row)
        }

        // 触发选中状态更新
        this.$forceUpdate()
      },
      handleCheckboxChange(row) {
        // 如果没有 cellCode，则不允许选中
        if (!row.cellCode) {
          this.$message.warning('该数据没有指标编号，无法选择')
          this.$set(row, 'checked', false)
          return
        }
        this.$set(row, 'checked', !row.checked)

        if (row.checked) {
          this.formatRowCode(row)
        }

        this.updateSelectedIndicatorCodes()

        this.$forceUpdate()
      },
      updateSelectedIndicatorCodes() {
        // 获取当前选中的行
        const selectedRows = this.indicatorTableData.filter(
          (item) => item.checked
        )

        // 更新选中的指标代码列表
        this.selectedIndicatorCodes = selectedRows.map((item) => {
          // 获取选中的模板信息
          const selectedTemplate = this.templateList.find(
            (template) => template.pkVal === this.selectedTemplateId
          )

          // 获取模板的 surveyTemplateNameYw
          const templateName = selectedTemplate
            ? selectedTemplate.surveyTemplateNameYw ||
              selectedTemplate.surveyTemplateName ||
              ''
            : ''

          return templateName
            ? `${templateName}.${item.code || item.cellCode || ''}`
            : item.code || item.cellCode || ''
        })
      },

      formatRowCode(row) {
        const selectedTemplate = this.templateList.find(
          (item) => item.pkVal === this.selectedTemplateId
        )

        const surveyTemplateNameYw = selectedTemplate
          ? selectedTemplate.surveyTemplateNameYw ||
            selectedTemplate.surveyTemplateName ||
            ''
          : ''

        const formattedCode = surveyTemplateNameYw
          ? `${surveyTemplateNameYw}.${row.code || row.cellCode || ''}`
          : row.code || row.cellCode || ''

        this.$set(row, 'formattedCode', formattedCode)

        const templateCode = surveyTemplateNameYw
          ? `${surveyTemplateNameYw}_${row.code || row.cellCode || ''}`
          : row.code || row.cellCode || ''

        this.$set(
          row,
          'jsonStr',
          JSON.stringify([
            {
              [templateCode]: this.selectedTemplateId,
            },
          ])
        )
      },
      openCalculationFormulaDialogVisible(row, index) {
        this.currentEditingRow = row
        this.currentEditingRowIndex = index
        this.calculationFormulaDialogVisible = true
        this.formulaText = row.calculationFormula || ''
        this.selectedTemplateId = '' // 重置选中的模板
        this.indicatorTableData = [] // 清空指标数据
        this.getListFixedEnabled()
      },

      getListFixedEnabled() {
        // 修改为调用状态为现行的数据
        const params = {
          surveyTemplateId: this.surveyTemplateId,
          status: '0',
          // pageNum: this.pagination.currentPage,
          // pageSize: this.pagination.pageSize,
        }

        // 根据成本调查表ID获取所有版本数据
        getCostSurveyTemplateVersionsByTemplateId(params)
          .then((response) => {
            this.templateList = response.value || []
          })
          .catch((error) => {
            console.error('查询失败:', error)
          })
        // getListFixedEnabled().then((res) => {
        //   this.templateList = res.value
        // })
      },
      // 处理模板选择变化
      handleTemplateChange(templateId) {
        if (templateId) {
          // 根据选中的模板ID查找对应的surveyTemplateId
          const selectedTemplate = this.templateList.find(
            (item) => item.pkVal === templateId
          )

          if (selectedTemplate && selectedTemplate.surveyTemplateId) {
            // this.getCellCodesByTemplateId(selectedTemplate.surveyTemplateId)
            listByCurrentTemplateId({
              surveyTemplateId: selectedTemplate.surveyTemplateId,
            }).then((responseData) => {
              //解析并显示数据
              if (responseData.value && responseData.value.itemlist) {
                const itemList = responseData.value.itemlist
                let fixedTablesTitle = this.stringToObjects(
                  responseData.value.fixedFields || ''
                )
                this.indicatorTableHeaders = fixedTablesTitle
                // 遍历itemList，为每个项目创建一行数据
                itemList.forEach((item, index) => {
                  const newRow = {
                    ...item,
                    checked: false,
                    cellCode: item.cellCode || '',
                    fixedValues: {},
                  }
                  // 初始化fixedValues并填充实际值
                  fixedTablesTitle.forEach((title) => {
                    newRow.fixedValues[title.rkey] = item[title.rkey] || ''
                  })
                  this.indicatorTableData.push(newRow)
                })
              }
            })
          } else {
            this.indicatorTableData = []
          }
        } else {
          this.indicatorTableData = []
        }

        // 恢复该模板之前选中的指标项
        this.$nextTick(() => {
          if (this.selectedIndicatorsPerTemplate[templateId]) {
            this.indicatorTableData.forEach((item) => {
              const isSelected = this.selectedIndicatorsPerTemplate[
                templateId
              ].some((selectedItem) => selectedItem.code === item.code)
              this.$set(item, 'checked', isSelected)

              if (isSelected) {
                this.formatRowCode(item)
              }
            })
          }

          // 更新选中的指标代码列表
          this.updateSelectedIndicatorCodes()
        })
      },

      handleDialogClose(done) {
        this.selectedIndicatorsPerTemplate = {}
        done()
      },
      handleRadioChange(value) {
        this.formulaText = ''
      },
      handleConfirm() {
        const result = {
          type: this.radioType,
          formula: this.formulaText,
          selectedTemplate: this.selectedTemplateId,
          selectedItems: this.indicatorTableData.filter((item) => item.checked),
        }
        let _data = []
        if (this.radioType == 'current') {
          // 使用递归函数扁平化树形结构
          const flattenTree = (nodes) => {
            let result = []
            nodes.forEach((node) => {
              result.push(node)
              if (node.children && node.children.length > 0) {
                result = result.concat(flattenTree(node.children))
              }
            })
            return result
          }

          // 扁平化数据并提取cellCode
          _data = flattenTree(this.contentEditForm.fixedTable.fixedTables)
            .filter((item) => item.cellCode)
            .map((item) => item.cellCode)
        } else if (this.radioType == 'other') {
          if (!result.selectedTemplate) {
            this.$message.error('请选择指标编号')
            return
          }
          _data = this.indicatorTableData
            .filter((item) => item.cellCode)
            .map((item) => item.cellCode)
        }
        if (!this.validateFormula(this.formulaText, _data).valid) {
          this.$message.error(
            this.validateFormula(this.formulaText, _data).errorMsg
          )
          return
        }

        // 生成 jsonstr 字段
        const jsonStrArray = this.indicatorTableData
          .filter((item) => item.checked)
          .map((item) => {
            if (item.jsonStr) {
              try {
                return JSON.parse(item.jsonStr)[0]
              } catch (e) {
                console.error('解析 jsonStr 失败:', e)
                return {}
              }
            }
            return {}
          })
          .filter((item) => Object.keys(item).length > 0)

        const jsonstr = JSON.stringify(jsonStrArray)

        // 更新当前编辑行的计算公式值
        if (this.currentEditingRow) {
          this.$set(
            this.currentEditingRow,
            'calculationFormula',
            this.formulaText
          )

          this.$set(this.currentEditingRow, 'jsonstr', jsonstr)
        }

        console.log('点击了确定，获取到的数据：', {
          ...result,
          jsonstr: jsonstr,
        })

        // 清空当前操作的状态
        this.calculationFormulaDialogVisible = false
        this.currentEditingRow = null
        this.currentEditingRowIndex = -1
        this.isAutoGeneratedFormula = false
        this.selectedTemplateId = ''
        this.indicatorTableData = []
        this.selectedIndicatorsPerTemplate = {} // 清空模板选中记录
      },
      // 获取单元格代码
      getCellCodesByTemplateId(surveyTemplateId) {
        getCellCodesByTemplateId(surveyTemplateId)
          .then((res) => {
            // 将返回的数据转换为表格需要的格式
            if (res.value && Array.isArray(res.value)) {
              this.indicatorTableData = res.value.map((item) => ({
                ...item,
                checked: false,
                code: item.cellCode || '',
                name: item.rvalue || '',
                formattedCode: '', // 添加格式化代码字段
              }))
            } else {
              this.indicatorTableData = []
            }
          })
          .catch((error) => {
            console.error('获取指标数据失败:', error)
            this.$message.error('获取指标数据失败')
            this.indicatorTableData = []
          })
      },
      handleFormulaTextChange(value) {
        // 当用户手动修改公式文本时，标记为非自动生成
        this.isAutoGeneratedFormula = false
      },

      handleAdd() {
        this.dialogTitle = '添加'
        // 获取当前时间
        const now = new Date()
        // 格式化时间为YYYY-MM-DD HH:mm:ss
        const formattedDate = `${now.getFullYear()}-${String(
          now.getMonth() + 1
        ).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(
          now.getHours()
        ).padStart(2, '0')}:${String(now.getMinutes()).padStart(
          2,
          '0'
        )}:${String(now.getSeconds()).padStart(2, '0')}`

        this.dataForm = {
          id: null,
          version: '',
          status: '',
          createBy: this.username,
          createTime: formattedDate,
          remarks: '',
        }
        this.dialogVisible = true
      },

      // 修改
      handleEdit(row) {
        this.dialogTitle = '修改'
        this.dataForm = { ...row }
        this.dialogVisible = true
      },

      //状态格式化
      forStatus(status) {
        return status === '-1' ? '草稿' : status === '0' ? '现行' : '历史'
      },

      // 查看详情
      handleViewDetail(row) {
        this.viewDetail = true
        this.detailForm = { ...row }
        // this.detailDialogVisible = true
        this.handleEditContent(row, this.viewDetail)
      },
      // 添加子项方法
      handleAddChildItem(index, type, parentRow) {
        if (!parentRow.rowid) {
          this.$set(parentRow, 'rowid', this.generateUUID())
        }

        switch (type) {
          case '固定表项目':
            let parentIndex1 =
              this.contentEditForm.fixedTable.fixedTables.findIndex(
                (item) => item.rowid == parentRow.rowid
              )
            if (
              !this.contentEditForm.fixedTable.fixedTables[parentIndex1]
                .children
            ) {
              this.$set(
                this.contentEditForm.fixedTable.fixedTables[parentIndex1],
                'children',
                []
              )
            }

            let childOrderNum =
              this.contentEditForm.fixedTable.fixedTables[parentIndex1].children
                .length + 1

            let fixedValues = {
              ...parentRow.fixedValues,
            }

            for (const key in fixedValues) {
              if (key == '序号') {
                fixedValues[key] = childOrderNum
              } else {
                fixedValues[key] = ''
              }
            }

            const fixedNewRow = {
              orderText: this.contentEditForm.fixedTable.fixedTables.length + 1,
              orderNum: this.contentEditForm.fixedTable.fixedTables.length + 1,
              cellCode: '',
              calculationFormula: '',
              unit: '',
              tabtype: this.templateType,
              surveyTemplateId: this.surveyTemplateId,
              versionId: this.versionId,
              fixedValues: fixedValues,
              parentid: parentRow.rowid,
              isChild: true,
              isSubItem: true,
              rowid: this.generateUUID(),
            }

            this.contentEditForm.fixedTable.fixedTablesTitle.forEach(
              (title) => {
                if (!(title.rkey in fixedNewRow.fixedValues)) {
                  fixedNewRow.fixedValues[title.rkey] = ''
                }
              }
            )

            // 先将子项添加到children数组
            this.contentEditForm.fixedTable.fixedTables[
              parentIndex1
            ].children.push(fixedNewRow)

            // this.contentEditForm.fixedTable.fixedTables.splice(
            //   index + 1,
            //   0,
            //   fixedNewRow
            // )
            break

          case '动态表项目':
            let parentIndex2 =
              this.contentEditForm.dynamicTable.dynamicTables.findIndex(
                (item) => item.rowid == parentRow.rowid
              )
            if (
              !this.contentEditForm.dynamicTable.dynamicTables[parentIndex2]
                .children
            ) {
              this.$set(
                this.contentEditForm.dynamicTable.dynamicTables[parentIndex2],
                'children',
                []
              )
            }

            let dynamicChildOrderNum =
              this.contentEditForm.dynamicTable.dynamicTables[parentIndex2]
                .children.length + 1
            let dynamicValues = { ...parentRow.dynamicValues }
            for (const key in dynamicValues) {
              if (key == '序号') {
                dynamicValues[key] = dynamicChildOrderNum
              } else {
                dynamicValues[key] = ''
              }
            }

            const dynamicNewRow = {
              orderText: dynamicChildOrderNum,
              orderNum: dynamicChildOrderNum,
              tabtype: this.templateType,
              surveyTemplateId: this.surveyTemplateId,
              versionId: this.versionId,
              dynamicValues: dynamicValues,
              parentid: parentRow.rowid,
              isChild: true,
              isSubItem: true,
              rowid: Date.now() + Math.random() + 1,
            }

            this.contentEditForm.dynamicTable.dynamicTablesTitle.forEach(
              (title) => {
                if (!(title.rkey in dynamicNewRow.dynamicValues)) {
                  dynamicNewRow.dynamicValues[title.rkey] = ''
                }
              }
            )
            this.contentEditForm.dynamicTable.dynamicTables[
              parentIndex2
            ].children.push(dynamicNewRow)

            // this.contentEditForm.dynamicTable.dynamicTables.splice(
            //   index + 1,
            //   0,
            //   dynamicNewRow
            // )
            break
        }

        this.$nextTick(() => {
          const tableBody = document.querySelector('.el-table__body-wrapper')
          if (tableBody) {
            tableBody.scrollTop = tableBody.scrollHeight
          }
        })
      },

      handleFormStyleChange() {},

      getListBySurveyTemplateIdAndVersion(surveyTemplateId, versionId) {
        return getListBySurveyTemplateIdAndVersion({
          surveyTemplateId: surveyTemplateId,
          versionId: versionId,
        })
          .then((res) => {
            // 确保表头数据包含所有必要的字段，包括 id
            this.contentEditForm.tableHeaders =
              res.value.map((item) => ({
                ...item,
                fieldKey: item.fieldEname
                  ? item.fieldEname.toLowerCase()
                  : `field_${Date.now()}_${Math.random()
                      .toString(36)
                      .substr(2, 9)}`,
              })) || []

            // 检查并添加序号字段（固定表和动态表需要）
            if (['2', '3'].includes(this.contentEditForm.templateType)) {
              const hasSerialNumber = this.contentEditForm.tableHeaders.some(
                (item) => item.fieldName === '序号'
              )
              if (!hasSerialNumber) {
                this.contentEditForm.tableHeaders.unshift({
                  fieldName: '序号',
                  fieldType: 'string',
                  format: '255',
                  fieldTypelen: '',
                  fieldTypenointlen: '',
                  isRequired: 'false',
                  showVisible: '1',
                  isAuditPeriod: 'false',
                  tabtype: this.templateType,
                  surveyTemplateId: this.surveyTemplateId,
                  versionId: this.versionId,
                  isDisabled: true,
                  orderNum: 1,
                })
              } else {
                // 如果已存在序号字段，确保其不可编辑
                const serialNumberIndex =
                  this.contentEditForm.tableHeaders.findIndex(
                    (item) => item.fieldName === '序号'
                  )
                if (serialNumberIndex !== -1) {
                  this.contentEditForm.tableHeaders[
                    serialNumberIndex
                  ].isDisabled = true
                }
              }
            }

            this.contentEditForm.dynamicTable.tableHeaders =
              this.contentEditForm.tableHeaders
            this.contentEditForm.fixedTable.tableHeaders =
              this.contentEditForm.tableHeaders
            // 表头按照orderNum重新排序
            this.contentEditForm.tableHeaders.sort(
              (a, b) => a.orderNum - b.orderNum
            )
            this.contentEditForm.dynamicTable.tableHeaders.sort(
              (a, b) => a.orderNum - b.orderNum
            )
            this.contentEditForm.fixedTable.tableHeaders.sort(
              (a, b) => a.orderNum - b.orderNum
            )
            // 同时获取表头标题信息
            listByTemplateIdAndVersion(surveyTemplateId, versionId)
              .then((response) => {
                if (response.code === 200) {
                  if (this.contentEditForm.templateType === '2') {
                    this.contentEditForm.fixedTable.fixedTablesTitle =
                      this.stringToObjects(response.value.fixedFields || '')
                  } else if (this.contentEditForm.templateType === '3') {
                    this.contentEditForm.dynamicTable.dynamicTablesTitle =
                      this.stringToObjects(response.value.fixedFields || '')
                  }
                }
                return response
              })
              .catch((error) => {
                console.error('获取表头标题信息失败:', error)
                throw error
              })
          })
          .catch((error) => {
            console.error('查询失败:', error)
            this.loading = false
            throw error
          })
      },
      initFixedTableRow(row) {
        if (row.cellCode === undefined) {
          this.$set(row, 'cellCode', '')
        }
        if (row.calculationFormula === undefined) {
          this.$set(row, 'calculationFormula', '')
        }
        if (row.unit === undefined) {
          this.$set(row, 'unit', '')
        }
        if (!row.fixedValues) {
          this.$set(row, 'fixedValues', {})
        }
        this.contentEditForm.fixedTable.fixedTablesTitle.forEach(
          (title, index) => {
            if (!(title.rkey in row.fixedValues)) {
              this.$set(row.fixedValues, title.rkey, '')
            }
          }
        )

        return row
      },
      initDynamicTableRow(row) {
        // 为当前行创建一个与 dynamicTablesTitle 对应的值对象
        if (!row.dynamicValues) {
          this.$set(row, 'dynamicValues', {})
        }

        // 确保每个动态列在当前行都有对应的值
        this.contentEditForm.dynamicTable.dynamicTablesTitle.forEach(
          (title) => {
            if (!(title.rkey in row.dynamicValues)) {
              this.$set(row.dynamicValues, title.rkey, '')
            }
          }
        )

        return row
      },
      /**
       * 处理固定表项目字段值变化
       */
      handleFixedValueChange(row, rkey, value) {
        if (!row.fixedValues) {
          this.$set(row, 'fixedValues', {})
        }
        this.$set(row.fixedValues, rkey, value)
      },
      // 获取或设置序号字段
      getOrSetOrder(row, value) {
        // 如果提供了value参数，则设置值
        if (value !== undefined) {
          // 使用this.$set确保响应式更新
          if (row['序号'] === undefined) {
            this.$set(row, '序号', value)
          } else {
            row['序号'] = value
          }
        }

        // 如果没有提供value参数，则获取值
        return row['序号'] !== undefined && row['序号'] !== null
          ? row['序号']
          : row.orderNum || ''
      },
      /**
       * 处理动态表项目字段值变化
       */
      handleDynamicValueChange(row, rkey, value) {
        if (!row.dynamicValues) {
          this.$set(row, 'dynamicValues', {})
        }
        this.$set(row.dynamicValues, rkey, value)
      },

      // 内容维护
      handleEditContent(row, viewDetail) {
        this.viewDetail = viewDetail || false
        this.versionId = row.id

        // 显示加载状态
        this.loading = true

        // 获取所有需要的数据
        this.getListBySurveyTemplateIdAndVersion(row.surveyTemplateId, row.id)
          .then(() => {
            // 获取项目数据用于回显
            return listByTemplateIdAndVersion(row.surveyTemplateId, row.id)
          })
          .then((res) => {
            if (res.code === 200) {
              // 根据模板类型解析并显示数据
              if (this.contentEditForm.templateType === '2') {
                // 解析并显示固定表项目数据
                setTimeout(() => {
                  this.parseAndDisplayFixedTableData(res)
                }, 1000)
              } else if (this.contentEditForm.templateType === '3') {
                // 解析并显示动态表项目数据
                setTimeout(() => {
                  this.parseAndDisplayDynamicTableData(res)
                }, 1000)
              }
            }
            this.loading = false
            this.contentEditDialogVisible = true
          })
          .catch((error) => {
            console.error('获取数据失败:', error)
            // this.$message.error('获取数据失败')
            this.contentEditDialogVisible = true
            this.loading = false
          })
      },

      // 字段类型变化处理
      handleFieldTypeChange(row) {
        // 重置格式相关字段
        row.format = ''
        row.integerDigits = ''
        row.decimalDigits = ''
      },

      // 添加表头
      handleAddTableHeader(type) {
        switch (type) {
          case '单记录':
            this.contentEditForm.tableHeaders.push({
              fieldName: '',
              fieldType: 'string',
              format: '255',
              fieldTypelen: '',
              fieldTypenointlen: '',
              isRequired: 'false',
              showVisible: '1',
              isDict: 'false',
              dictid: '',
              dictValue: '',
              tabtype: this.templateType,
              surveyTemplateId: this.surveyTemplateId,
              versionId: this.versionId,
              orderNum: this.contentEditForm.tableHeaders.length + 1,
            })
            break
          case '固定表表头':
            this.contentEditForm.fixedTable.tableHeaders.push({
              fieldName: '',
              fieldType: 'string',
              format: '255',
              fieldTypelen: '',
              fieldTypenointlen: '',
              isRequired: 'false',
              showVisible: '1',
              isAuditPeriod: 'false',
              tabtype: this.templateType,
              surveyTemplateId: this.surveyTemplateId,
              versionId: this.versionId,
              orderNum: this.contentEditForm.fixedTable.tableHeaders.length + 1,
            })
            // 确保添加后顺序正确
            this.updateTableHeadersOrderNumbers()
            break

          case '固定表项目':
            let maxFixedOrderNum = 0
            if (this.contentEditForm.fixedTable.fixedTables.length > 0) {
              maxFixedOrderNum = Math.max(
                ...this.contentEditForm.fixedTable.fixedTables.map(
                  (item) => item.orderNum || 0
                )
              )
            }

            const newRow = {
              orderText: maxFixedOrderNum + 1,
              orderNum: maxFixedOrderNum + 1,
              cellCode: '',
              calculationFormula: '',
              unit: '',
              tabtype: this.templateType,
              surveyTemplateId: this.surveyTemplateId,
              versionId: this.versionId,
              fixedValues: {},
              parentid: -1,
              rowid: this.generateUUID(),
              children: [],
            }

            this.contentEditForm.fixedTable.fixedTablesTitle.forEach(
              (title) => {
                newRow.fixedValues[title.rkey] = ''
              }
            )

            this.contentEditForm.fixedTable.fixedTables.push(newRow)

            break

          case '动态表表头':
            this.contentEditForm.dynamicTable.tableHeaders.push({
              fieldName: '',
              fieldType: 'string',
              format: '255',
              fieldTypelen: '',
              fieldTypenointlen: '',
              isRequired: 'false',
              showVisible: '1',
              tabtype: this.templateType,
              surveyTemplateId: this.surveyTemplateId,
              versionId: this.versionId,
              orderNum:
                this.contentEditForm.dynamicTable.tableHeaders.length + 1,
            })
            break
          case '动态表项目':
            let maxDynamicOrderNum = 0
            if (this.contentEditForm.dynamicTable.dynamicTables.length > 0) {
              maxDynamicOrderNum = Math.max(
                ...this.contentEditForm.dynamicTable.dynamicTables.map(
                  (item) => item.orderNum || 0
                )
              )
            }

            const dynamicRow = {
              orderText: maxDynamicOrderNum + 1,
              orderNum: maxDynamicOrderNum + 1,
              tabtype: this.templateType,
              surveyTemplateId: this.surveyTemplateId,
              versionId: this.versionId,
              dynamicValues: {},
              parentid: -1,
              rowid: this.generateUUID(),
              children: [],
            }

            this.contentEditForm.dynamicTable.dynamicTablesTitle.forEach(
              (title) => {
                dynamicRow.dynamicValues[title.rkey] = ''
              }
            )

            this.contentEditForm.dynamicTable.dynamicTables.push(dynamicRow)
            break
          default:
            break
        }
        this.$nextTick(() => {
          const tableBody = document.querySelector('.el-table__body-wrapper')
          if (tableBody) {
            tableBody.scrollTop = tableBody.scrollHeight
          }
        })
      },

      // 删除表头
      handleDeleteHeader(index, type, row) {
        const handleDelete = () => {
          const data = {
            deleteheadersList: [row],
          }
          getBatchSaveOrUpdate(data)
            .then((res) => {
              if (res.code === 200) {
                this.$message.success('删除成功')
              } else {
                this.$message.error(`删除失败：${res.message || '未知错误'}`)
              }
            })
            .catch((error) => {
              console.error('删除接口异常:', error)
              // this.$message.error('删除接口异常，请重试')
            })
            .finally(() => {})
        }
        switch (type) {
          case '固定表表头':
            if (this.contentEditForm.fixedTable.tableHeaders.length <= 1) {
              this.$message.warning('至少保留一个表头')
              return
            }

            this.contentEditForm.fixedTable.tableHeaders.splice(index, 1)
            let fixedFields = this.contentEditForm.fixedTable.tableHeaders
              .map((item) => item.fieldName)
              .join(',')
            this.contentEditForm.fixedTable.fixedTablesTitle =
              this.stringToObjects(fixedFields || '')
            this.contentEditForm.fixedTable.fixedTableHeaders =
              this.contentEditForm.fixedTable.fixedTablesTitle.filter(
                (title) => title.rkey !== '序号'
              )
            handleDelete()
            // 重新排序
            this.updateTableHeadersOrderNumbers()
            break

          case '固定表项目':
            this.$confirm(
              '确定要删除此行数据吗？如果删除的是父项，将同时删除其所有子项。',
              '确认删除',
              {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
              }
            )
              .then(() => {
                // 检查是否是删除子项
                const isChildItem = row.isChild || row.isSubItem || false
                console.log('isChildItem', isChildItem)
                console.log('row', row)
                if (isChildItem) {
                  // 查找父项
                  const parentItem =
                    this.contentEditForm.fixedTable.fixedTables.find(
                      (item) =>
                        item.children &&
                        item.children.some((child) => child.rowid === row.rowid)
                    )

                  if (parentItem && parentItem.children) {
                    // 从父项的children数组中删除子项
                    const childIndex = parentItem.children.findIndex(
                      (child) => child.rowid === row.rowid
                    )
                    if (childIndex > -1) {
                      parentItem.children.splice(childIndex, 1)

                      // 如果children数组为空，将hasChildren设为false
                      if (parentItem.children.length === 0) {
                        this.$set(parentItem, 'hasChildren', false)
                      } else {
                        // 重新计算子项序号
                        parentItem.children.forEach((child, idx) => {
                          child.orderText = idx + 1
                          child.orderNum = idx + 1
                        })
                      }

                      // 确保Vue响应式系统检测到变化
                      const children = [...parentItem.children]
                      this.$set(parentItem, 'children', children)

                      this.handleSaveContent('固定表项目', 'delete') // 保存数据
                    }
                  }
                } else {
                  // 处理删除父项的情况
                  if (this.contentEditForm.fixedTable.fixedTables.length <= 1) {
                    this.$message.warning('至少保留一个项目')
                    return
                  }

                  // 获取要删除的行
                  index =
                    this.contentEditForm.fixedTable.fixedTables.indexOf(row)
                  const rowToDelete =
                    this.contentEditForm.fixedTable.fixedTables[index]
                  // 先删除所有子项（parentid等于当前行的rowid或itemId的项）
                  // 从后往前删除，避免索引偏移
                  const rowsToDelete = []

                  // 找出所有需要删除的行（包括父项和子项）
                  for (
                    let i = 0;
                    i < this.contentEditForm.fixedTable.fixedTables.length;
                    i++
                  ) {
                    const currentRow =
                      this.contentEditForm.fixedTable.fixedTables[i]
                    // 是当前行或其子项（子项的parentid等于当前行的rowid或itemId）
                    if (
                      i === index ||
                      (currentRow.parentid &&
                        (currentRow.parentid === rowToDelete.rowid ||
                          currentRow.parentid === rowToDelete.itemId))
                    ) {
                      rowsToDelete.push(i)
                    }
                  }

                  // 从后往前删除，避免索引偏移
                  for (let i = rowsToDelete.length - 1; i >= 0; i--) {
                    this.contentEditForm.fixedTable.fixedTables.splice(
                      rowsToDelete[i],
                      1
                    )
                  }

                  this.handleSaveContent('固定表项目', 'delete') // 保存数据
                }
              })
              .catch(() => {})
            break
          case '动态表表头':
            if (this.contentEditForm.dynamicTable.tableHeaders.length <= 1) {
              this.$message.warning('至少保留一个表头')
              return
            }
            this.contentEditForm.dynamicTable.tableHeaders.splice(index, 1)
            let dynamicFields = this.contentEditForm.dynamicTable.tableHeaders
              .map((item) => item.fieldName)
              .join(',')
            this.contentEditForm.dynamicTable.dynamicTablesTitle =
              this.stringToObjects(dynamicFields || '')
            this.contentEditForm.dynamicTable.dynamicTableHeaders =
              this.contentEditForm.dynamicTable.dynamicTablesTitle.filter(
                (title) => title.rkey !== '序号'
              )
            handleDelete()
            // 重新排序
            this.updateTableHeadersOrderNumbers()
            break
          case '动态表项目':
            if (this.contentEditForm.dynamicTable.dynamicTables.length <= 1) {
              this.$message.warning('至少保留一个项目')
              return
            }
            this.$confirm(
              '确定要删除此行数据吗？如果删除的是父项，将同时删除其所有子项。',
              '确认删除',
              {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
              }
            )
              .then(() => {
                // 检查是否是删除子项
                const isChildItem = row.isChild || row.isSubItem || false

                if (isChildItem) {
                  // 查找父项
                  const parentItem =
                    this.contentEditForm.dynamicTable.dynamicTables.find(
                      (item) =>
                        item.children &&
                        item.children.some((child) => child.rowid === row.rowid)
                    )

                  if (parentItem && parentItem.children) {
                    // 从父项的children数组中删除子项
                    const childIndex = parentItem.children.findIndex(
                      (child) => child.rowid === row.rowid
                    )
                    if (childIndex > -1) {
                      parentItem.children.splice(childIndex, 1)

                      // 如果children数组为空，将hasChildren设为false
                      if (parentItem.children.length === 0) {
                        this.$set(parentItem, 'hasChildren', false)
                      } else {
                        // 重新计算子项序号
                        parentItem.children.forEach((child, idx) => {
                          child.orderText = idx + 1
                          child.orderNum = idx + 1
                        })
                      }

                      // 确保Vue响应式系统检测到变化
                      const children = [...parentItem.children]
                      this.$set(parentItem, 'children', children)

                      this.handleSaveContent('动态表项目', 'delete') // 保存数据
                    }
                  }
                } else {
                  // 处理删除父项的情况
                  if (
                    this.contentEditForm.dynamicTable.dynamicTables.length <= 1
                  ) {
                    this.$message.warning('至少保留一个项目')
                    return
                  }

                  // 获取要删除的行
                  index =
                    this.contentEditForm.dynamicTable.dynamicTables.indexOf(row)
                  const rowToDelete =
                    this.contentEditForm.dynamicTable.dynamicTables[index]

                  // 先删除所有子项（parentid等于当前行的rowid或itemId的项）
                  // 从后往前删除，避免索引偏移
                  const rowsToDelete = []

                  // 找出所有需要删除的行（包括父项和子项）
                  for (
                    let i = 0;
                    i < this.contentEditForm.dynamicTable.dynamicTables.length;
                    i++
                  ) {
                    const currentRow =
                      this.contentEditForm.dynamicTable.dynamicTables[i]
                    // 是当前行或其子项（子项的parentid等于当前行的rowid或itemId）
                    if (
                      i === index ||
                      (currentRow.parentid &&
                        (currentRow.parentid === rowToDelete.rowid ||
                          currentRow.parentid === rowToDelete.itemId))
                    ) {
                      rowsToDelete.push(i)
                    }
                  }

                  // 从后往前删除，避免索引偏移
                  for (let i = rowsToDelete.length - 1; i >= 0; i--) {
                    this.contentEditForm.dynamicTable.dynamicTables.splice(
                      rowsToDelete[i],
                      1
                    )
                  }

                  this.handleSaveContent('动态表项目', 'delete') // 保存数据
                }
              })
              .catch(() => {})
            break
          case '单记录':
            if (this.contentEditForm.tableHeaders.length <= 1) {
              this.$message.warning('至少保留一个表头')
              return
            }
            this.contentEditForm.tableHeaders.splice(index, 1)
            handleDelete()
            break
          default:
            break
        }
      },

      // 上升
      handleMoveUp(index, tableType, row) {
        if (tableType === '固定表') {
          const fixedTableData = this.contentEditForm.fixedTable.fixedTables
          const newFixedTableData = [...fixedTableData]
          this.swamTableArr(newFixedTableData, row, true)
          this.contentEditForm.fixedTable.fixedTables = newFixedTableData
        } else if (tableType === '动态表') {
          const dynamicTableData =
            this.contentEditForm.dynamicTable.dynamicTables
          const newDynamicTableData = [...dynamicTableData]
          this.swamTableArr(newDynamicTableData, row, true)
          this.contentEditForm.dynamicTable.dynamicTables = newDynamicTableData
        } else {
          // const tableHeaders = this.contentEditForm.tableHeaders
          // const newTableHeaders = [...tableHeaders]
          // this.swamTableArr(newTableHeaders, row, true, true)
          // this.contentEditForm.tableHeaders = newTableHeaders
          // console.log('newTableHeaders', newTableHeaders)
          if (index > 0) {
            const temp = this.contentEditForm.tableHeaders[index]
            this.contentEditForm.tableHeaders.splice(index, 1)
            this.contentEditForm.tableHeaders.splice(index - 1, 0, temp)
            // 更新表头的序号
            this.updateTableHeadersOrderNumbers()
          }
        }
      },
      // 下降
      handleMoveDown(index, tableType, row) {
        if (tableType === '固定表') {
          const fixedTableData = this.contentEditForm.fixedTable.fixedTables
          const newFixedTableData = [...fixedTableData]
          this.swamTableArr(newFixedTableData, row, false)
          this.contentEditForm.fixedTable.fixedTables = newFixedTableData
        } else if (tableType === '动态表') {
          const dynamicTableData =
            this.contentEditForm.dynamicTable.dynamicTables
          const newDynamicTableData = [...dynamicTableData]
          this.swamTableArr(newDynamicTableData, row, false)
          this.contentEditForm.dynamicTable.dynamicTables = newDynamicTableData
        } else {
          // const tableHeaders = this.contentEditForm.tableHeaders
          // const newTableHeaders = [...tableHeaders]
          // this.swamTableArr(newTableHeaders, row, false)
          // this.contentEditForm.tableHeaders = newTableHeaders
          if (index < this.contentEditForm.tableHeaders.length - 1) {
            const temp = this.contentEditForm.tableHeaders[index]
            this.contentEditForm.tableHeaders.splice(index, 1)
            this.contentEditForm.tableHeaders.splice(index + 1, 0, temp)
            // 更新表头的序号
            this.updateTableHeadersOrderNumbers()
          }
        }
      },

      swamTableArr(arr, row, asc, isHeader) {
        if (isHeader) {
          // 创建数组副本以确保Vue能检测到变化
          // 直接替换整个数组，确保Vue能检测到变化
          this.doSwamTableArr(arr, row, asc, isHeader)
        } else {
          const isChild = row.isChild || row.isSubItem || false
          if (isChild) {
            // 子节点处理逻辑后续实现 parentid rowid
            let child = arr.find((item) => item.rowid === row.parentid)
            // const rowIndex = arr.indexOf(row);
            // newFixedTableData[rowIndex]
            this.doSwamTableArr(child.children, row, asc, isHeader)
          } else {
            this.doSwamTableArr(arr, row, asc, isHeader)
          }
        }
      },

      // 更新表头序号
      updateTableHeadersOrderNumbers() {
        if (!this.contentEditForm || !this.contentEditForm.tableHeaders) return

        // 更新主表头的orderNum
        this.contentEditForm.tableHeaders.forEach((header, index) => {
          header.orderNum = index + 1
        })

        // 同步更新固定表和动态表的表头序号
        if (
          this.contentEditForm.fixedTable &&
          this.contentEditForm.fixedTable.tableHeaders
        ) {
          this.contentEditForm.fixedTable.tableHeaders.forEach(
            (header, index) => {
              header.orderNum = index + 1
            }
          )
        }

        if (
          this.contentEditForm.dynamicTable &&
          this.contentEditForm.dynamicTable.tableHeaders
        ) {
          this.contentEditForm.dynamicTable.tableHeaders.forEach(
            (header, index) => {
              header.orderNum = index + 1
            }
          )
        }
      },

      doSwamTableArr(arr, row, asc, isHeader) {
        const rowIndex = arr.indexOf(row)
        let swamIndex = 0
        if (asc) {
          // 正序
          if (rowIndex < 1) {
            return
          }
          swamIndex = rowIndex - 1
        } else {
          // 倒序
          if (rowIndex >= arr.length - 1) {
            return
          }
          swamIndex = rowIndex + 1
        }

        const curr = arr[rowIndex]
        const swam = arr[swamIndex]

        // 交换orderNum
        const tempOrderNum = curr.orderNum
        curr.orderNum = swam.orderNum
        swam.orderNum = tempOrderNum
        // row.isChild &&
        if (!isHeader) {
          // 获取当前项的序号值
          let currIndex = curr.fixedValues
            ? curr.fixedValues['序号']
            : curr.dynamicValues['序号']
          // 获取交换项的序号值
          let swamIndex = swam.fixedValues
            ? swam.fixedValues['序号']
            : swam.dynamicValues['序号']
          // 先保存交换项的值，再进行赋值，避免值被覆盖
          if (curr.fixedValues) {
            curr.fixedValues['序号'] = swamIndex
          } else {
            curr.dynamicValues['序号'] = swamIndex
          }
          if (swam.fixedValues) {
            swam.fixedValues['序号'] = currIndex
          } else {
            swam.dynamicValues['序号'] = currIndex
          }
        }

        // 交换数组中的位置
        arr[rowIndex] = swam
        arr[swamIndex] = curr
      },

      // 启动/停用状态
      handleStatus(row) {
        const action = row.status === '启用' ? '停用' : '启用'
        if (row.status === '0') {
          this.$confirm(`确认要停用该数据吗?`, '操作确认', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              row.status = '-1'
              putSurveyTemplatePublishVersion(row).then((res) => {
                if (res.code === 200) {
                  this.$message.success(`停用成功`)
                  this.handleSearch()
                }
              })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消操作',
              })
            })
        } else if (row.status === '-1') {
          this.$confirm(`确认要启用该数据吗?`, '操作确认', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              row.status = '0'
              putSurveyTemplatePublishVersion(row).then((res) => {
                if (res.code === 200) {
                  this.$message.success(`启用成功`)
                  this.handleSearch()
                }
              })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消操作',
              })
            })
        }
      },

      // 更新固定表行序号
      updateFixedTableOrderNumbers() {
        this.contentEditForm.fixedTable.fixedTables.forEach((row, index) => {
          // 更新显示序号
          this.$set(row, 'orderText', index + 1)
          // 更新后端序号
          this.$set(row, 'orderNum', index + 1)
        })
      },
      // 更新动态表行序号
      updateDynamicTableOrderNumbers() {
        this.contentEditForm.dynamicTable.dynamicTables.forEach(
          (row, index) => {
            // 更新显示序号
            this.$set(row, 'orderText', index + 1)
            // 更新后端序号
            this.$set(row, 'orderNum', index + 1)
          }
        )
      },

      // 绑定字典变化
      handleBindDictChange(row) {
        if (row.isDict === 'false') {
          row.dictid = ''
        }
      },

      // 获取格式占位符
      getFormatPlaceholder(fieldType) {
        switch (fieldType) {
          case '日期':
            return '如：yyyy-MM-dd'
          case '数字':
            return '如：#,##0.00'
          default:
            return '请输入格式'
        }
      },

      // 滚动到错误行
      scrollToErrorRow(rowIndex) {
        this.$nextTick(() => {
          const tableBody = document.querySelector(
            '.table-edit-container .el-table__body-wrapper'
          )
          if (tableBody) {
            const scrollTop = rowIndex * 48
            tableBody.scrollTop = scrollTop
          }
        })
      },
      // 保存内容
      handleSaveContent(type, action) {
        this.loading = true
        let isValid = false
        try {
          if (type === '单记录') {
            var data = {
              headersList: this.contentEditForm.tableHeaders,
            }
            getBatchSaveOrUpdate(data)
              .then((res) => {
                if (res.code === 200) {
                  if (action != 'delete') {
                    this.$message.success('保存成功')
                    this.contentEditDialogVisible = false
                  }
                } else {
                  this.$message.error(`保存失败：${res.message || '未知错误'}`)
                }
              })
              .catch((error) => {
                console.error('保存接口异常:', error)
                // this.$message.error('保存接口异常，请重试')
              })
              .finally(() => {
                this.loading = false
              })
          } else if (type === '固定表表头') {
            var data = {
              headersList: this.contentEditForm.fixedTable.tableHeaders,
            }
            getBatchSaveOrUpdate(data)
              .then((res) => {
                if (res.code === 200) {
                  this.contentEditForm.isFixedTables = true
                  this.loading = true

                  // 如果后端返回了保存后的数据，更新本地数据
                  if (res.value && Array.isArray(res.value)) {
                    this.contentEditForm.fixedTable.tableHeaders =
                      res.value.map((item) => ({
                        ...item,
                      }))
                    // 确保保存后的数据也按正确顺序显示
                    this.updateTableHeadersOrderNumbers()
                  }
                  this.getListBySurveyTemplateIdAndVersion(
                    this.surveyTemplateId,
                    this.versionId
                  )
                  listByTemplateIdAndVersion(
                    this.surveyTemplateId,
                    this.versionId
                  )
                    .then((res) => {
                      this.loading = false

                      this.contentEditForm.fixedTable.fixedTablesTitle =
                        this.stringToObjects(res.value.fixedFields)

                      this.contentEditForm.fixedTable.fixedTables.forEach(
                        (row) => {
                          this.initFixedTableRow(row)
                        }
                      )
                      this.contentEditForm.fixedTable.fixedTableHeaders =
                        this.contentEditForm.fixedTable.fixedTablesTitle.filter(
                          (title) => title.rkey !== '序号'
                        )
                    })
                    .catch((error) => {
                      console.error('查询失败:', error)
                      this.loading = false
                    })
                } else {
                  this.$message.error(`保存失败：${res.message || '未知错误'}`)
                }
              })
              .catch((error) => {
                console.error('保存接口异常:', error)
                // this.$message.error('保存接口异常，请重试')
              })
              .finally(() => {
                this.loading = false
              })
          } else if (type === '固定表项目') {
            this.saveFixedTableData(action)
          } else if (type === '动态表表头') {
            var data = {
              headersList: this.contentEditForm.dynamicTable.tableHeaders,
            }
            getBatchSaveOrUpdate(data)
              .then((res) => {
                if (res.code === 200) {
                  this.contentEditForm.isDynamicTables = true
                  this.loading = true

                  // 如果后端返回了保存后的数据，更新本地数据
                  if (res.value && Array.isArray(res.value)) {
                    this.contentEditForm.dynamicTable.tableHeaders =
                      res.value.map((item) => ({
                        ...item,
                        fieldKey: item.fieldEname
                          ? item.fieldEname.toLowerCase()
                          : `field_${Date.now()}_${Math.random()
                              .toString(36)
                              .substr(2, 9)}`,
                      }))
                    // 确保保存后的数据也按正确顺序显示
                    this.updateTableHeadersOrderNumbers()
                  }
                  this.getListBySurveyTemplateIdAndVersion(
                    this.surveyTemplateId,
                    this.versionId
                  )

                  listByTemplateIdAndVersion(
                    this.surveyTemplateId,
                    this.versionId
                  )
                    .then((res) => {
                      this.loading = false

                      this.contentEditForm.dynamicTable.dynamicTablesTitle =
                        this.stringToObjects(res.value.fixedFields || '')

                      // 初始化所有已有行的 dynamicValues
                      this.contentEditForm.dynamicTable.dynamicTables.forEach(
                        (row) => {
                          this.initDynamicTableRow(row)
                        }
                      )
                      this.contentEditForm.dynamicTable.dynamicTableHeaders =
                        this.contentEditForm.dynamicTable.dynamicTablesTitle.filter(
                          (title) => title.rkey !== '序号'
                        )
                    })
                    .catch((error) => {
                      console.error('查询失败:', error)
                      this.loading = false
                    })
                } else {
                  this.$message.error(`保存失败：${res.message || '未知错误'}`)
                }
              })
              .catch((error) => {
                console.error('保存接口异常:', error)
                // this.$message.error('保存接口异常，请重试')
              })
              .finally(() => {
                this.loading = false
              })
          } else if (type === '动态表项目') {
            this.saveDynamicTableData(action)
          }
        } catch (error) {
          console.error('保存处理异常:', error)
          // this.$message.error('保存过程中发生错误，请重试')
          this.loading = false
        }
      },
      // 公式验证函数
      validateFormula(formula, data) {
        if (!formula || typeof formula !== 'string') {
          return { valid: false, errorMsg: '公式不能为空' }
        }

        // 定义有效的操作符
        const operators = ['+', '-', '*', '/', '(', ')']

        // 检查是否包含至少一个操作符
        const hasOperator = operators.some((operator) =>
          formula.includes(operator)
        )
        if (!hasOperator) {
          return { valid: false, errorMsg: '公式必须包含操作符' }
        }

        // 检查值是否在data中存在
        function checkValueInData(value, data) {
          if (!data) return false

          if (Array.isArray(data)) {
            return data.includes(value)
          } else if (typeof data === 'object') {
            return Object.values(data).includes(value)
          }
          return data === value
        }

        // 提取公式中的变量/值
        function extractValues(formulaStr) {
          // 改进实现：支持形如"CeShi3.C2"的格式，提取点后面的部分作为变量，同时保留普通变量
          const result = new Set()

          // 1. 首先提取带点格式中的变量部分（如CeShi3.C2中的C2）
          const dotRegex = /[A-Za-z0-9]+\.([A-Za-z0-9]+)/g
          let dotMatch
          while ((dotMatch = dotRegex.exec(formulaStr)) !== null) {
            result.add(dotMatch[1]) // 提取点后面的部分作为变量
          }

          // 2. 然后提取普通变量（C3等），但排除已经从带点格式中提取的部分
          // 移除所有带点的部分，然后提取剩余的变量
          const remainingFormula = formulaStr.replace(
            /[A-Za-z0-9]+\.[A-Za-z0-9]+/g,
            ''
          )
          const normalRegex = /[A-Za-z0-9]+/g
          let normalMatch
          while ((normalMatch = normalRegex.exec(remainingFormula)) !== null) {
            // 跳过纯数字
            if (
              !isNaN(Number(normalMatch[0])) &&
              Number(normalMatch[0]).toString() === normalMatch[0]
            ) {
              continue
            }
            result.add(normalMatch[0])
          }

          return Array.from(result)
        }

        function checkOperatorContext(formulaStr, data) {
          for (let i = 0; i < formulaStr.length; i++) {
            const char = formulaStr[i]
            // 跳过括号
            if (char === '(' || char === ')') continue

            // 检查操作符
            if (operators.includes(char)) {
              // 检查操作符前是否有值（开头或不是操作符和左括号）
              if (
                i === 0 ||
                (operators.includes(formulaStr[i - 1]) &&
                  formulaStr[i - 1] !== ')') ||
                formulaStr[i - 1] === '('
              ) {
                return {
                  valid: false,
                  errorMsg: `位置 ${i + 1} 的操作符 '${char}' 前缺少值`,
                }
              }

              // 检查操作符后是否有值（结尾或不是操作符和右括号）
              if (
                i === formulaStr.length - 1 ||
                (operators.includes(formulaStr[i + 1]) &&
                  formulaStr[i + 1] !== '(') ||
                formulaStr[i + 1] === ')'
              ) {
                return {
                  valid: false,
                  errorMsg: `位置 ${i + 1} 的操作符 '${char}' 后缺少值`,
                }
              }
            }
          }

          // 验证通过后，检查公式中的值是否都在data中存在
          if (data.length > 0) {
            const values = extractValues(formulaStr)
            for (const value of values) {
              // 跳过纯数字（假设有值不在data中）
              if (!isNaN(Number(value)) && Number(value).toString() === value) {
                continue
              }

              if (!checkValueInData(value, data)) {
                return {
                  valid: false,
                  errorMsg: `变量 '${value}' 在数据中不存在`,
                }
              }
            }
          }

          return { valid: true }
        }

        // 执行验证
        return checkOperatorContext(formula, data)
      },

      /**
       * 将固定表项目的数据根据固定列拆分成对应的数据结构
       * @returns {Array} 拆分后的数据数组，每个固定列对应一行数据
       */
      splitFixedTableDataForSave() {
        const fixedTables = this.contentEditForm.fixedTable.fixedTables
        const fixedTitles = this.contentEditForm.fixedTable.fixedTablesTitle
        const fixedHeaders = this.contentEditForm.fixedTable.tableHeaders
        // 结果数组
        const result = []

        // 递归处理树形结构中的所有节点
        const processNode = (node, parentRowIndex = 0) => {
          // 确保node和fixedValues存在
          if (!node) {
            console.warn('遇到空节点，跳过处理')
            return
          }

          // 确保fixedValues属性存在，如果不存在则初始化为空对象
          if (!node.fixedValues) {
            node.fixedValues = {}
          }

          // 为每个固定列创建一条记录
          fixedTitles.forEach((title) => {
            // 找到对应的表头信息
            const correspondingHeader = fixedHeaders.find(
              (header) => header.fieldName === title.rkey
            )

            const newItem = {
              rkey: title.rkey,
              rvalue: node.fixedValues[title.rkey] || '',
              surveyTemplateId: node.surveyTemplateId || this.surveyTemplateId,
              versionId: node.versionId || this.versionId,
              tabtype: node.tabtype || this.templateType,
              // 添加 headersId 字段（表头的id）
              headersId: correspondingHeader ? correspondingHeader.id : null,
              // 添加记录的id（itemlist中每条记录的id）
              id: node.itemId || null,
              // 添加父子关系字段
              parentid: node.parentid || -1, // 父项ID，默认为-1表示无父项
              isChild: node.isChild || false, // 是否为子项
              // 添加 rowid 字段
              rowid: node.rowid || null,
              // 添加计算公式相关字段
              calculationFormula: node.calculationFormula || null,
              jsonstr: node.jsonstr || null,
              orderNum:
                typeof node.orderNum === 'number'
                  ? node.orderNum
                  : parseInt(node.orderNum, 10) || 0,
            }
            // 添加其他固定表特有的字段
            if (!node.isSubItem) {
              newItem.cellCode = node.cellCode || ''
              newItem.unit = node.unit || ''
            }

            // 添加其他可能需要的字段，但排除特定字段
            Object.keys(node).forEach((key) => {
              if (
                !(key in newItem) &&
                key !== 'fixedValues' &&
                key !== 'itemId' &&
                key !== 'id' &&
                key !== 'parentid' &&
                key !== 'isChild' &&
                key !== 'isSubItem' &&
                key !== 'rowid' &&
                key !== 'jsonstr' &&
                key !== 'calculationFormula' &&
                key !== 'children' // 排除children字段
              ) {
                newItem[key] = node[key]
              }
            })

            result.push(newItem)
          })

          // 递归处理子节点
          if (node.children && node.children.length > 0) {
            node.children.forEach((childNode) => {
              processNode(childNode)
            })
          }
        }

        // 遍历所有顶级节点
        fixedTables.forEach((row) => {
          processNode(row)
        })
        // 重新给子节点赋值orderNum 保证所有元素orderNum字段不重复
        // 为所有子节点分配唯一的orderNum，但保持父节点的orderNum不变
        // 计算所有已存在的orderNum中的最大值
        let maxExistingOrderNum = 0

        // 首先遍历结果数组找出当前最大的orderNum
        result.forEach((item) => {
          const orderNum =
            typeof item.orderNum === 'number'
              ? item.orderNum
              : parseInt(item.orderNum, 10) || 0
          if (orderNum > maxExistingOrderNum) {
            maxExistingOrderNum = orderNum
          }
        })

        // 子节点orderNum从当前最大orderNum + 1开始
        let childOrderNumCounter = maxExistingOrderNum + 1

        // 创建一个映射表，用于记录每个子节点对应的新orderNum
        const childOrderMap = new Map()

        // 第一次遍历：为每个子节点分配新的orderNum并存储映射关系
        function assignChildOrderNums(nodes) {
          nodes.forEach((node) => {
            if (node.isChild || node.isSubItem) {
              // 为每个子节点分配唯一的orderNum
              childOrderMap.set(node.id || node.rowid, childOrderNumCounter++)
            }
            // 递归处理子节点
            if (node.children && node.children.length > 0) {
              assignChildOrderNums(node.children)
            }
          })
        }

        // 第二次遍历：更新结果数组中的orderNum
        assignChildOrderNums(fixedTables)

        // 应用新的orderNum到结果数组
        result.forEach((item) => {
          // 只更新子节点的orderNum
          if (item.isChild || item.isSubItem) {
            const newOrderNum =
              childOrderMap.get(item.id) || childOrderMap.get(item.rowid)
            if (newOrderNum) {
              item.orderNum = newOrderNum
            }
          }
        })

        return result
      },
      /**
       * 将动态表项目的数据根据动态列拆分成对应的数据结构
       * @returns {Array} 拆分后的数据数组，每个动态列对应一行数据
       */
      splitDynamicTableDataForSave() {
        const dynamicTables = this.contentEditForm.dynamicTable.dynamicTables
        const dynamicTitles =
          this.contentEditForm.dynamicTable.dynamicTablesTitle
        const dynamicHeaders = this.contentEditForm.dynamicTable.tableHeaders
        // 结果数组
        const result = []

        // 递归处理树形结构中的所有节点
        const processNode = (node) => {
          // 确保node和dynamicValues存在
          if (!node) {
            console.warn('遇到空节点，跳过处理')
            return
          }

          // 确保dynamicValues属性存在，如果不存在则初始化为空对象
          if (!node.dynamicValues) {
            node.dynamicValues = {}
          }

          // 为每个固定列创建一条记录
          dynamicTitles.forEach((title) => {
            // 找到对应的表头信息
            const correspondingHeader = dynamicHeaders.find(
              (header) => header.fieldName === title.rkey
            )

            const newItem = {
              rkey: title.rkey,
              rvalue: node.dynamicValues[title.rkey] || '',
              surveyTemplateId: node.surveyTemplateId,
              versionId: node.versionId,
              tabtype: node.tabtype,
              // 添加 headersId 字段（表头的id）
              headersId: correspondingHeader ? correspondingHeader.id : null,
              // 添加记录的id（itemlist中每条记录的id）
              id: node.itemId || null,
              // 添加父子关系字段
              parentid: node.parentid || -1, // 父项ID，默认为-1表示无父项
              isChild: node.isChild || false, // 是否为子项
              // 添加 rowid 字段
              rowid: node.rowid || null,
              // 添加计算公式相关字段
              calculationFormula: node.calculationFormula || null,
              jsonstr: node.jsonstr || null,
              orderNum:
                typeof node.orderNum === 'number'
                  ? node.orderNum
                  : parseInt(node.orderNum, 10) || 0,
            }

            // 添加其他可能需要的字段，但排除特定字段
            Object.keys(node).forEach((key) => {
              if (
                !(key in newItem) &&
                key !== 'dynamicValues' &&
                key !== 'itemId' &&
                key !== 'id' &&
                key !== 'parentid' &&
                key !== 'isChild' &&
                key !== 'isSubItem' &&
                key !== 'rowid' &&
                key !== 'jsonstr' &&
                key !== 'calculationFormula' &&
                key !== 'children' // 排除children字段
              ) {
                newItem[key] = node[key]
              }
            })

            result.push(newItem)
          })

          // 递归处理子节点
          if (node.children && node.children.length > 0) {
            node.children.forEach((childNode) => {
              processNode(childNode)
            })
          }
        }

        // 遍历所有顶级节点
        dynamicTables.forEach((row) => {
          processNode(row)
        })
        // 重新给子节点赋值orderNum 保证所有元素orderNum字段不重复
        // 为所有子节点分配唯一的orderNum，但保持父节点的orderNum不变

        // 计算所有已存在的orderNum中的最大值
        let maxExistingOrderNum = 0

        // 首先遍历结果数组找出当前最大的orderNum
        result.forEach((item) => {
          const orderNum =
            typeof item.orderNum === 'number'
              ? item.orderNum
              : parseInt(item.orderNum, 10) || 0
          if (orderNum > maxExistingOrderNum) {
            maxExistingOrderNum = orderNum
          }
        })
        // 子节点orderNum从当前最大orderNum + 1开始
        let childOrderNumCounter = maxExistingOrderNum + 1

        // 创建一个映射表，用于记录每个子节点对应的新orderNum
        const childOrderMap = new Map()
        // 第一次遍历：为每个子节点分配新的orderNum并存储映射关系
        function assignChildOrderNums(nodes) {
          nodes.forEach((node) => {
            if (node.isChild || node.isSubItem) {
              // 为每个子节点分配唯一的orderNum
              childOrderMap.set(node.id || node.rowid, childOrderNumCounter++)
            }
            // 递归处理子节点
            if (node.children && node.children.length > 0) {
              assignChildOrderNums(node.children)
            }
          })
        }
        // 第二次遍历：更新结果数组中的orderNum
        assignChildOrderNums(dynamicTables)

        // 应用新的orderNum到结果数组
        result.forEach((item) => {
          // 只更新子节点的orderNum
          if (item.isChild || item.isSubItem) {
            const newOrderNum =
              childOrderMap.get(item.id) || childOrderMap.get(item.rowid)
            if (newOrderNum) {
              item.orderNum = newOrderNum
            }
          }
        })
        return result
      },
      //保存固定表项目数据
      saveFixedTableData(action = '') {
        try {
          // 获取拆分后的数据
          const splitData = this.splitFixedTableDataForSave()

          // 构造保存数据的结构
          const saveData = {
            itemsList: splitData,
          }

          // 调用保存接口
          getBatchSaveOrUpdate(saveData)
            .then((res) => {
              if (res.code === 200) {
                // 如果是删除操作，不显示成功提示且不关闭对话框
                if (action !== 'delete') {
                  this.$message.success('固定表数据保存成功')
                  this.contentEditDialogVisible = false
                }
                // 刷新数据以确保UI更新
                this.getListBySurveyTemplateIdAndVersion(
                  this.surveyTemplateId,
                  this.versionId
                )
              } else {
                this.$message.error(`保存失败：${res.message || '未知错误'}`)
              }
            })
            .catch((error) => {
              console.error('保存固定表数据接口异常:', error)
              // this.$message.error('保存固定表数据失败，请重试')
            })
            .finally(() => {
              this.loading = false
            })

          return splitData
        } catch (error) {
          console.error('处理固定表数据保存时出错:', error)
          // this.$message.error('保存过程中发生错误，请重试')
          this.loading = false
        }
      },
      //保存动态表项目数据
      saveDynamicTableData() {
        try {
          // 获取拆分后的数据
          const splitData = this.splitDynamicTableDataForSave()

          // 构造保存数据的结构
          const saveData = {
            itemsList: splitData,
          }

          // 调用保存接口
          getBatchSaveOrUpdate(saveData)
            .then((res) => {
              if (res.code === 200) {
                if (action != 'delete') {
                  this.$message.success('动态表数据保存成功')
                  this.contentEditDialogVisible = false
                }
              } else {
                this.$message.error(`保存失败：${res.message || '未知错误'}`)
              }
            })
            .catch((error) => {
              console.error('保存动态表数据接口异常:', error)
              // this.$message.error('保存动态表数据失败，请重试')
            })
            .finally(() => {
              this.loading = false
            })

          return splitData
        } catch (error) {
          console.error('处理动态表数据保存时出错:', error)
          // this.$message.error('保存过程中发生错误，请重试')
          this.loading = false
        }
      },
      /**
       * 解析并回显固定表项目数据
       * @param {Object} responseData - listByTemplateIdAndVersion接口返回的数据
       */
      parseAndDisplayFixedTableData(responseData) {
        if (responseData.value.fixedFields) {
          this.contentEditForm.fixedTable.fixedTablesTitle =
            this.stringToObjects(responseData.value.fixedFields || '')
        } else {
          let fixedFields = this.contentEditForm.fixedTable.tableHeaders
            .map((item) => item.fieldName)
            .join(',')
          this.contentEditForm.fixedTable.fixedTablesTitle =
            this.stringToObjects(fixedFields || '')
        }
        const fixedTitles = this.contentEditForm.fixedTable.fixedTablesTitle
        this.contentEditForm.fixedTable.fixedTableHeaders = fixedTitles.filter(
          (title) => title.rkey !== '序号'
        )
        if (
          !responseData ||
          !responseData.value ||
          !responseData.value.itemlist
        ) {
          return
        }

        const itemList = responseData.value.itemlist
        const allRows = []
        const rowMap = new Map()

        // 清空现有数据
        this.contentEditForm.fixedTable.fixedTables = []

        // 遍历itemList，为每个项目创建一行数据
        itemList.forEach((item, index) => {
          // 判断是否为子项（parentid不为-1且不为"-1"）
          const isSubItem =
            item.parentid && item.parentid !== -1 && item.parentid !== '-1'

          const newRow = {
            orderText: item.orderNum || '', // 显示用序号
            orderNum: item.orderNum || '', // 保留原始序号用于发送后端
            surveyTemplateId: item.surveyTemplateId,
            versionId: item.versionId,
            cellCode: item.cellCode || '',
            calculationFormula: item.calculationFormula || '',
            unit: item.unit || '',
            fixedValues: {},
            itemId: item.id || null,
            parentid: item.parentid || -1,
            isChild: isSubItem,
            isSubItem: isSubItem,
            rowid: item.rowid || this.generateUUID(),
            jsonstr: item.jsonstr || null,
            children: [], // 添加children数组用于树形结构
          }

          // 确保orderNum是数字类型
          if (item.orderNum) {
            newRow.orderNum = parseInt(item.orderNum, 10) || 0
          }

          // 初始化fixedValues并填充实际值
          fixedTitles.forEach((title) => {
            newRow.fixedValues[title.rkey] = item[title.rkey] || ''
          })

          allRows.push(newRow)
          // 构建rowMap用于快速查找
          if (newRow.rowid) rowMap.set(String(newRow.rowid), newRow)
          if (newRow.itemId) rowMap.set(String(newRow.itemId), newRow)
        })

        // 构建树形结构
        const treeData = []
        const parentItems = allRows.filter((item) => !item.isChild)

        // 父级按orderNum正序排序
        parentItems.sort((a, b) => (a.orderNum || 0) - (b.orderNum || 0))

        // 将子项添加到对应的父项的children中
        allRows.forEach((item) => {
          if (item.isChild) {
            const parentId = String(item.parentid)
            const parent = rowMap.get(parentId)
            if (parent) {
              parent.children.push(item)
            }
          }
        })

        // 对子项进行排序
        parentItems.forEach((parent) => {
          parent.children.sort(
            (a, b) =>
              (a.fixedValues['序号'] || 0) - (b.fixedValues['序号'] || 0)
          )
          treeData.push(parent)
        })

        this.contentEditForm.fixedTable.fixedTables = treeData
      },

      /**
       * 解析并回显动态表项目数据
       * @param {Object} responseData - listByTemplateIdAndVersion接口返回的数据
       */
      parseAndDisplayDynamicTableData(responseData) {
        if (responseData.value.fixedFields) {
          this.contentEditForm.dynamicTable.dynamicTablesTitle =
            this.stringToObjects(responseData.value.fixedFields || '')
        } else {
          let fixedFields = this.contentEditForm.dynamicTable.tableHeaders
            .map((item) => item.fieldName)
            .join(',')
          this.contentEditForm.dynamicTable.dynamicTablesTitle =
            this.stringToObjects(fixedFields || '')
        }
        const dynamicTitles =
          this.contentEditForm.dynamicTable.dynamicTablesTitle
        this.contentEditForm.dynamicTable.dynamicTableHeaders =
          dynamicTitles.filter((title) => title.rkey !== '序号')
        if (
          !responseData ||
          !responseData.value ||
          !responseData.value.itemlist
        ) {
          return
        }

        const itemList = responseData.value.itemlist
        const allRows = []
        const rowMap = new Map()

        // 清空现有数据
        this.contentEditForm.dynamicTable.dynamicTables = []

        // 遍历itemList，为每个项目创建一行数据
        itemList.forEach((item, index) => {
          // 判断是否为子项（parentid不为-1且不为"-1"）
          const isSubItem =
            item.parentid && item.parentid !== -1 && item.parentid !== '-1'

          const newRow = {
            orderText: item.orderNum || '', // 显示用序号
            orderNum: item.orderNum || '', // 保留原始序号用于发送后端
            surveyTemplateId: item.surveyTemplateId,
            dynamicValues: {},
            itemId: item.id || null,
            parentid: item.parentid || -1,
            isChild: isSubItem,
            isSubItem: isSubItem,
            rowid: item.rowid || this.generateUUID(),
            jsonstr: item.jsonstr || null,
            children: [], // 添加children数组用于树形结构
          }

          // 确保orderNum是数字类型
          if (item.orderNum) {
            newRow.orderNum = parseInt(item.orderNum, 10) || 0
          }

          // 初始化dynamicValues并填充实际值
          dynamicTitles.forEach((title) => {
            // 特殊处理序号字段，需要保存到dynamicValues中供输入框使用
            if (title.rkey === '序号') {
              // 优先使用item中的序号值，如果没有则保持为空
              newRow.dynamicValues[title.rkey] = item[title.rkey] || ''
            }
            // 排除其他序号相关字段，避免重复显示
            else if (title.rkey !== 'ordernum' && title.rkey !== 'orderText') {
              newRow.dynamicValues[title.rkey] = item[title.rkey] || ''
            }
          })

          allRows.push(newRow)
          // 构建rowMap用于快速查找
          if (newRow.rowid) rowMap.set(String(newRow.rowid), newRow)
          if (newRow.itemId) rowMap.set(String(newRow.itemId), newRow)
        })

        // 构建树形结构
        const treeData = []
        const parentItems = allRows.filter((item) => !item.isChild)

        // 父级按orderNum正序排序
        parentItems.sort((a, b) => (a.orderNum || 0) - (b.orderNum || 0))

        // 将子项添加到对应的父项的children中
        allRows.forEach((item) => {
          if (item.isChild) {
            const parentId = String(item.parentid)
            const parent = rowMap.get(parentId)
            if (parent) {
              parent.children.push(item)
            }
          }
        })

        // 对子项进行排序
        parentItems.forEach((parent) => {
          parent.children.sort(
            (a, b) =>
              (Number(a.dynamicValues['序号']) || 0) -
              (Number(b.dynamicValues['序号']) || 0)
          )
          treeData.push(parent)
        })

        this.contentEditForm.dynamicTable.dynamicTables = treeData
        console.log('树形结构数据:', treeData)
      },
      //分割字符串
      stringToObjects(str) {
        const items = str.split(',')
        return items.map((item) => ({
          rkey: item,
          rvalue: '',
        }))
      },

      // 删除
      handleDelete(row) {
        this.$confirm('确定要删除该数据吗？', '提示', {
          type: 'warning',
        })
          .then(() => {
            this.loading = true
            delSurveyTemplateVersionById(row.id)
              .then((res) => {
                if (res.code === 200) {
                  this.$message.success(res.message || '删除成功')
                  this.handleSearch()
                  this.loading = false
                }
              })
              .catch((error) => {
                console.error('删除失败:', error)
                this.loading = false
              })
          })
          .catch(() => {})
      },

      // 批量删除
      handleBatchDelete() {
        if (this.selectedRows.length === 0) {
          this.$message.warning('请先选择要删除的数据')
          return
        }

        this.$confirm(
          `确定要删除选中的${this.selectedRows.length}条数据吗？`,
          '提示',
          {
            type: 'warning',
          }
        )
          .then(() => {
            this.loading = true
            const ids = this.selectedRows.map((row) => row.id)

            batchDeleteCostForm(ids)
              .then((res) => {
                this.selectedRows = []
                this.$message.success(res.message || '删除成功')
                this.handleSearch()
                this.loading = false
              })
              .catch((error) => {
                console.error('批量删除失败:', error)
                this.loading = false
              })
          })
          .catch(() => {})
      },

      // 表格选择
      handleSelectionChange(selection) {
        this.selectedRows = selection
      },

      // 分页变化处理
      handlePaginationChange({ currentPage, pageSize }) {
        this.pagination.currentPage = currentPage
        this.pagination.pageSize = pageSize
        this.handleSearch()
      },

      // 提交表单
      submitForm() {
        this.$refs.dataForm.validate((valid) => {
          if (valid) {
            this.loading = true

            const submitData = {
              versionNo: this.dataForm.version,
              status: this.dataForm.status,
              createBy: this.dataForm.createBy,
              createTime: this.dataForm.createTime,
              remarks: this.dataForm.remarks,
              templateType: this.currentRow.templateType,
              surveyTemplateName: this.currentRow.surveyTemplateName,
              surveyTemplateId: this.currentRow.surveyTemplateId,
            }

            if (this.dataForm.id) {
              // 修改
              submitData.formId = this.dataForm.id
              editCostForm(submitData)
                .then(() => {
                  this.loading = false
                  this.$message.success('修改成功')
                  this.dialogVisible = false
                  this.handleSearch() // 重新加载数据
                })
                .catch((error) => {
                  console.error('修改失败:', error)
                  // this.$message.error('修改失败，请重试')
                  this.loading = false
                })
            } else {
              addSurveyTemplateVersion(submitData)
                .then(() => {
                  this.loading = false
                  this.$message.success('添加成功')
                  this.dialogVisible = false
                  this.handleSearch() // 重新加载数据
                })
                .catch((error) => {
                  console.error('添加失败:', error)
                  // this.$message.error('添加失败，请重试')
                  this.loading = false
                })
            }
          }
        })
      },

      // 获取数据存储库表选项
      loadDataStorageTableOptions() {
        getDataStorageTableOptions()
          .then((response) => {
            this.dataStorageTableOptions = response.data || []
          })
          .catch((error) => {
            console.error('获取数据存储库表选项失败:', error)
          })
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import '@/styles/costAudit.scss';
  .top-wrapper {
    display: flex;
    align-items: center;
  }

  .data-form,
  .detail-form {
    ::v-deep .el-select {
      width: 100%;
    }
  }

  .content-edit-container {
    overflow-y: auto;

    .button-group {
      margin: 10px 0;

      .el-button {
        margin-right: 10px;
      }
    }

    .table-edit-container {
      margin-top: 10px;

      ::v-deep .el-table {
        transition: height 0.3s ease;
      }

      ::v-deep .el-table__body-wrapper {
        transition: scrollTop 0.3s ease;
      }
    }

    .bind-dict-column {
      display: flex;
      flex-direction: column;
    }

    .table-actions {
      display: flex;
      justify-content: center;
      align-items: center;

      .el-button {
        padding: 4px;
        margin: 0 2px;
      }
    }

    .format-input {
      display: flex;
      align-items: center;

      .format-prefix {
        font-size: 12px;
        color: #606266;
        margin-right: 5px;
        white-space: nowrap;
      }
    }
  }
  .detail-info-container {
    margin: 20px 0;
    border-radius: 4px;
    .detail-item {
      display: inline-block;
      margin-right: 30px;
      margin-bottom: 10px;

      .detail-label {
        font-weight: bold;
        color: #606266;
      }

      .detail-value {
        color: #303133;
      }
    }
  }
</style>