TS2339: Property ‘value‘ does not exist on type ‘MessageBoxData‘.

1、源代码

html 复制代码

<template>
  <el-dialog
    :visible="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    title="邀请码"
    width="1200px"
    append-to-body
    destroy-on-close
  >
    <div class="invite-code-wrap">
      <div class="operate-bar">
        <el-button
          type="primary"
          size="mini"
          @click="handleAdd"
        >
          添加
        </el-button>
      </div>

      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :max-height="500"
      >
        <el-table-column
          fixed
          prop="id"
          label="邀请码ID"
          width="80"
        />
        <el-table-column
          prop="code"
          label="邀请码"
          width="120"
        >
          <template slot-scope="scope">
            <div class="code-desc">
              <span>{{ scope.row.code }}</span>
              <p class="desc">6位整数，可以重复出现，但是在任何有效时间内具有唯一一性</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="invitor"
          label="邀请人"
          width="100"
        />
        <el-table-column
          prop="createTime"
          label="生成时间"
          width="140"
        />
        <el-table-column
          prop="expireTime"
          label="失效时间"
          width="140"
        />
        <el-table-column
          prop="remark"
          label="备注"
          width="150"
          show-overflow-tooltip
        />
        <el-table-column
          prop="status"
          label="状态"
          width="80"
        >
          <template slot-scope="scope">
            <el-tag
              :type="getStatusType(scope.row.status)"
              size="mini"
            >
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="boundPhone"
          label="绑定手机号"
          width="110"
        />
        <el-table-column
          prop="boundWxUid"
          label="绑定微信UID"
          width="120"
          show-overflow-tooltip
        />
        <el-table-column
          label="操作"
          fixed="right"
          width="120"
        >
          <template slot-scope="scope">
            <div class="operation-cell">
              <el-button
                type="text"
                size="mini"
                class="operation-btn"
                @click="handleLock(scope.row)"
              >
                锁定
              </el-button>
              <el-button
                type="text"
                size="mini"
                class="operation-btn"
                @click="handleRemark(scope.row)"
              >
                备注
              </el-button>
              <el-button
                type="text"
                size="mini"
                class="operation-btn"
                @click="handleLog(scope.row)"
              >
                日志
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <invite-code-add
      :visible.sync="addVisible"
      @success="handleAddSuccess"
    />
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import InviteCodeAdd from './invite-code-add.vue'

  @Component({
    name: 'InviteCodeForm',
    components: {
      InviteCodeAdd
    }
  })
export default class extends Vue {
    @Prop({ default: false })
    private visible!: boolean

    private tableData = [{
      id: 1,
      code: '123456',
      invitor: '张三',
      createTime: '2023-12-11 16:58:25',
      expireTime: '2023-12-11 16:58:25',
      remark: '测试数据',
      status: 'pending',
      boundPhone: '18658862700',
      boundWxUid: 'XXXXXXXXXX',
      isLocked: false
    }]

    private addVisible = false

    private getStatusType(status: string) {
      const map: { [key: string]: string } = {
        pending: 'info',
        expired: 'danger',
        bound: 'success'
      }
      return map[status] || 'info'
    }

    private getStatusText(status: string) {
      const map: { [key: string]: string } = {
        pending: '待绑定',
        expired: '已失效',
        bound: '已绑定'
      }
      return map[status] || status
    }

    private handleClose() {
      this.$emit('update:visible', false)
    }

    private handleAdd() {
      this.addVisible = true
    }

    private handleAddSuccess() {
      // TODO: 刷新列表数据
    }

    private handleLock(row: any) {
      // TODO: 处理锁定/解锁逻辑
      this.$confirm(`确定要${row.isLocked ? '解锁' : '锁定'}该邀请码吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // TODO: 调用锁定/解锁API
        this.$message.success(`${row.isLocked ? '解锁' : '锁定'}成功`)
      }).catch(() => {})
    }

    private handleRemark(row: any) {
      this.$prompt('请输入备注', '备注', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: row.remark,
        inputValidator: (value: string) => {
          return value.length <= 60
        },
        inputErrorMessage: '备注不能超过60个字符'
      }).then(async({ value }) => {
        // TODO: 调用保存备注API
        this.$message.success('备注保存成功')
      }).catch(() => {})
    }

    private handleLog(row: any) {
      // TODO: 显示日志记录
      // 可以打开一个新的对话框显示操作日志列表
    }

    mounted() {
      // TODO: 获取邀请码列表数据
    }
}
</script>

<style lang="scss" scoped>
.invite-code-wrap {
  .operate-bar {
    margin-bottom: 16px;
  }

  .code-desc {
    .desc {
      margin: 5px 0 0;
      font-size: 12px;
      color: #999;
      line-height: 1.2;
    }
  }

  :deep(.el-table) {
    // 表格基础样式
    width: 100%;
    border: 1px solid #EBEEF5;

    // 表头样式
    th {
      background-color: #F5F7FA;
      color: #606266;
      font-weight: 500;
      padding: 12px 0;
    }

    // 表格内容样式
    td {
      padding: 12px 0;
    }

    // 状态标签样式
    .el-tag {
      height: 22px;
      line-height: 20px;
      border-radius: 2px;
      margin: 0;
    }

    // 操作列按钮样式
    .operation-cell {
      white-space: nowrap;
      text-align: center;

      .el-button {
        padding: 0;
        font-size: 12px;
        color: #409EFF;
        border: none;
        background: transparent;
        margin: 0 4px;

        &:hover {
          color: #66b1ff;
        }
      }
    }

    // 单元格通用样式
    .cell {
      line-height: 23px;
    }

    // 文字溢出处理
    .el-table__row {
      td {
        .cell {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>

2、修改之后

html 复制代码

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { ElMessageBox } from 'element-ui/types/message-box'
import InviteCodeAdd from './invite-code-add.vue'

type MessageBoxData = {
  value: string
  action: 'confirm' | 'cancel'
}

@Component({
  name: 'InviteCodeForm',
  components: {
    InviteCodeAdd
  }
})
export default class extends Vue {
  // ... 其他代码保持不变 ...

  private handleRemark(row: any) {
    this.$prompt('请输入备注', '备注', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputValue: row.remark,
      inputValidator: (value: string) => {
        return value.length <= 60
      },
      inputErrorMessage: '备注不能超过60个字符'
    }).then(async (data: MessageBoxData) => {
      // TODO: 调用保存备注API
      this.$message.success('备注保存成功')
    }).catch(() => {})
  }

  // ... 其他代码保持不变 ...
}
</script>

主要改动：

添加了 MessageBoxData 类型定义
在 then 回调中使用完整的 data 参数而不是解构