spider_creater/frontend/src/components/spider/VerifySpider.vue

<!--爬虫配置自动校验-->
<!-- 新增爬虫 -->
<template>
    <el-dialog title="爬虫配置验证结果" v-model="dialogVisible" width="70%">
        <el-divider content-position="center">验证结果</el-divider>
        <el-descriptions direction="vertical" :column="4" border>
            <el-descriptions-item :class-name="formData.title ? 'c-success' : 'c-danger'" label="标题">{{ formatText(formData.title) }}</el-descriptions-item>
            <el-descriptions-item :class-name="formData.publishUnit ? 'c-success' : 'c-danger'" label="发布单位">{{ formatText(formData.publishUnit) }}</el-descriptions-item>
            <el-descriptions-item :class-name="formData.publishTime ? 'c-success' : 'c-danger'" label="发布时间">{{ formatText(formData.publishTime) }}</el-descriptions-item>
            <el-descriptions-item :class-name="formData.content ? 'c-success' : 'c-danger'" label="正文">{{ formatText(formData.content) }}</el-descriptions-item>
            <el-descriptions-item :class-name="formData.attaches ? 'c-success' : 'c-danger'" label="附件">{{ formatText(formData.attaches) }}</el-descriptions-item>
            <el-descriptions-item :class-name="formData.listItems ? 'c-success' : 'c-danger'" label="列表信息条数">{{ formatText(formData.listItems) }}</el-descriptions-item>
            <el-descriptions-item :class-name="formData.listTrunPage ? 'c-success' : 'c-danger'" label="列表翻页">{{ formatText(formData.listTrunPage) }}</el-descriptions-item>
        </el-descriptions>
        <el-divider content-position="center">样例数据</el-divider>
        <el-table :data="tableData" style="width: 100%" height="180" @row-click="handleRowClick">
            <el-table-column prop="no" label="序号" width="60" />
            <el-table-column prop="listTitle" label="标题" width="240" show-overflow-tooltip />
            <el-table-column prop="href" label="链接" show-overflow-tooltip />
            <el-table-column prop="listPublishTime" label="发布时间" show-overflow-tooltip />
            <el-table-column prop="contentShort" label="正文" show-overflow-tooltip />
        </el-table>
<!--        <template #footer>-->
<!--            <div class="dialog-footer">-->
<!--                <el-button @click="dialogVisible = false" type="primary">关闭</el-button>-->
<!--            </div>-->
<!--        </template>-->
        <ViewArticle ref="articleDialog" />
    </el-dialog>
</template>
<script setup>
import { ref, watch, defineExpose } from 'vue';
import { ViewResultItemAll} from "../../../wailsjs/go/main/App"
import ViewArticle from "./ViewArticle.vue";
const tableData = ref([])
const articleDialog = ref(null)

let spiderInfo = {}
const formData = ref({
    title: false,
    publishUnit: false,
    publishTime: false,
    content: false,
    attaches: false,
    listItems: false,
    listTrunPage: false,
});

const dialogVisible = ref(false)

const setPageData = (show = false, info) => {
  dialogVisible.value = show
  if (info) {
    formData.value = info.ret || {}
    spiderInfo = info.row
  }
}
const replaceAll = function (src, search, replacement) {
  return src.split(search).join(replacement);
};
//行点击事件
const handleRowClick = (row, column, event) => {
  articleDialog.value.dialogVisible = true
  row.content = replaceAll(row.content, '\n', '<br/>')
  articleDialog.value.formData = row
  articleDialog.value.scrollTop()
}

const formatText = (f = false) => {
    return f ? '通过' : '未通过'
}

const truncateString = (str, maxLength) => {
  return str.substring(0, maxLength) + "..";
}

const loadResultData = () => {
  ViewResultItemAll(spiderInfo.code).then(result => {
    result.forEach((v, i) => {
      v.contentShort = truncateString(v.content, 50)
    })
    tableData.value = result
  }).catch(err => {
    console.log(err)
  })
}

watch(dialogVisible, (v) => {
  if (v) {
    loadResultData()
  }
})

//这里是重点
defineExpose({
  setPageData
})
</script>
<style lang="scss" scoped>
::v-deep {
    .c-success {
        color: var(--el-color-success) !important;
    }
    .c-danger {
        color: var(--el-color-danger) !important;
    }
}
</style>