cfc/cfc-web/src/views/admin/ReportParserImport.vue

<template>
  <div class="report-import admin-page">
    <el-card>
      <div slot="header">
        <span>解析器导入管理</span>
        <div style="float: right; display: flex; gap: 10px;">
          <el-button type="primary" size="small" icon="el-icon-upload2" @click="uploadDialogVisible = true">上传导入包</el-button>
        </div>
      </div>

            <div class="adm-table-wrap">
<el-table :data="imports" v-loading="loading" border stripe height="100%">
        <el-table-column prop="id" label="ID" width="60">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('id', $event)">ID{{ sortIcon('id') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="packageName" label="导入包名称" min-width="200">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('packageName', $event)">导入包名称<span v-if="sortIndex('packageName') !== null" class="sort-index" :class="sortClass('packageName') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('packageName') }}</span>{{ sortIcon('packageName') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="packageFileUrl" label="文件" width="150">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('packageFileUrl', $event)">文件<span v-if="sortIndex('packageFileUrl') !== null" class="sort-index" :class="sortClass('packageFileUrl') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('packageFileUrl') }}</span>{{ sortIcon('packageFileUrl') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="{ row }">
            <el-tag :type="statusType(row.status)" size="small">{{ statusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="导入时间" width="180">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('createdAt', $event)">导入时间{{ sortIcon('createdAt') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" fixed="right">
          <template slot-scope="{ row }">
            <template v-if="row.status === 'pending'">
              <el-button size="mini" type="success" @click="handleApprove(row)">批准</el-button>
              <el-button size="mini" type="danger" @click="handleReject(row)">驳回</el-button>
            </template>
            <el-button size="mini" type="primary" @click="handlePreview(row)">预览</el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
    </el-card>

    <!-- 上传导入包对话框 -->
    <el-dialog :visible.sync="uploadDialogVisible" title="上传导入包" width="600px" :close-on-click-modal="false">
      <el-upload
        drag
        :auto-upload="false"
        :limit="1"
        accept=".json"
        :on-change="handleFileChange">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将 json 文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">导入包 JSON 格式：{ packageName, typeId, displayName, family, description, parserScript, fingerprints: [{pattern, weight, isExclusion}] }</div>
      </el-upload>
      <div slot="footer">
        <el-button @click="uploadDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleImport" :loading="submitting">确认导入</el-button>
      </div>
    </el-dialog>

    <!-- 预览导入包对话框 -->
    <el-dialog :visible.sync="previewDialogVisible" title="导入包预览" width="700px">
      <div v-if="previewData">
        <el-descriptions :column="2" border size="small">
          <el-descriptions-item label="名称">{{ previewData.packageName }}</el-descriptions-item>
          <el-descriptions-item label="类型ID">{{ previewData.typeId }}</el-descriptions-item>
          <el-descriptions-item label="显示名称">{{ previewData.displayName }}</el-descriptions-item>
          <el-descriptions-item label="家族">{{ previewData.family }}</el-descriptions-item>
          <el-descriptions-item label="描述" :span="2">{{ previewData.description }}</el-descriptions-item>
        </el-descriptions>
        <h4>指纹规则</h4>
        <el-table :data="previewData.fingerprints || []" border size="small">
          <el-table-column prop="pattern" label="文本特征" min-width="200" />
          <el-table-column prop="weight" label="权重" width="70" />
          <el-table-column label="类型" width="80">
            <template slot-scope="{ row }">
              <el-tag :type="row.isExclusion ? 'danger' : 'success'" size="mini">{{ row.isExclusion ? '排除' : '正向' }}</el-tag>
            </template>
          </el-table-column>
        <h4>解析脚本</h4>
        <pre class="script-preview">{{ previewData.parserScript }}</pre>
      
      </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getParserImports, approveParserImport, rejectParserImport, importParserPackage } from '@/api/reportParser'
import SortMixin from '@/mixins/SortMixin'

export default {
  name: 'ReportParserImport',
  mixins: [SortMixin],
  data() {
    return {
      loading: false, submitting: false,
      imports: [],
      sortableColumns: { id: 'ID', createdAt: '导入时间', packageName: '导入包名称', packageFileUrl: '文件' },
      uploadDialogVisible: false,
      previewDialogVisible: false,
      selectedFile: null,
      previewData: null,
    }
  },
  mounted() { this.fetchImports() },
  methods: {
    loadList() {
      this.fetchImports()
    },
    async fetchImports() {
      this.loading = true
      try {
        var params = { page: 1, size: 50 }
        if (this.sortState.length > 0) params.sort = this.sortState
        const res = await getParserImports(params)
        this.imports = res.data?.records || res.data || []
      } catch (e) { this.$message.error('加载失败') }
      this.loading = false
    },
    statusType(status) {
      return { pending: 'warning', approved: 'success', rejected: 'danger' }[status] || 'info'
    },
    statusText(status) {
      return { pending: '待审核', approved: '已批准', rejected: '已驳回' }[status] || status
    },
    handleFileChange(file) {
      this.selectedFile = file.raw
    },
    async handleImport() {
      if (!this.selectedFile) {
        this.$message.warning('请先选择文件')
        return
      }
      this.submitting = true
      const reader = new FileReader()
      reader.onload = async (e) => {
        try {
          const jsonContent = e.target.result
          const res = await importParserPackage({ jsonContent, fileName: this.selectedFile.name })
          this.$message.success('导入成功，待审核')
          this.uploadDialogVisible = false
          this.selectedFile = null
          this.fetchImports()
        } catch (err) { this.$message.error('导入失败') }
        this.submitting = false
      }
      reader.readAsText(this.selectedFile)
    },
    handlePreview(row) {
      try {
        const jsonContent = row.fingerprintJson
        this.previewData = JSON.parse(jsonContent)
        this.previewDialogVisible = true
      } catch (e) { this.$message.error('预览失败：JSON 解析错误') }
    },
    handleApprove(row) {
      this.$confirm('确认批准此导入？将注册报告类型和指纹规则。', '提示', { type: 'warning' })
        .then(async () => {
          try {
            await approveParserImport({ id: row.id })
            this.$message.success('已批准')
            this.fetchImports()
          } catch (e) { this.$message.error('操作失败') }
        }).catch(() => {})
    },
    handleReject(row) {
      this.$prompt('请输入驳回原因', '驳回导入', { inputPlaceholder: '驳回原因', inputValidator: (v) => !!v || '请输入原因' })
        .then(async ({ value }) => {
          try {
            await rejectParserImport({ id: row.id, note: value })
            this.$message.success('已驳回')
            this.fetchImports()
          } catch (e) { this.$message.error('操作失败') }
        }).catch(() => {})
    },
  }
}
</script>

<style scoped>
.script-preview {
  background: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 10px;
  max-height: 300px;
  overflow: auto;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
}
.sort-header {
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  font-size: 12px;
}
.sort-header:hover {
  color: #409eff;
}
</style>