spider_creater/frontend/src/components/EditSpider.vue

<!-- 新增爬虫 -->
<template>
    <el-dialog title="仅编辑 CSS选择器部分" v-model="dialogVisible" :close-on-click-modal="false" width="80%">
        <div class="flex gap-2">
            <el-space class="edit-tag-list">
                <el-tag class="edit-tag" type="primary">{{ formData.site }} </el-tag>
                <el-tag class="edit-tag" type="success">{{ formData.channel }} </el-tag>
                <el-tag class="edit-tag" type="info">{{ formData.code }} </el-tag>
                <el-tag class="edit-tag" type="warning">{{ formData.href }} </el-tag>
                <el-tag class="edit-tag" type="danger">{{ formData.modifyuser }} </el-tag>
            </el-space>
        </div>
        <div class="space" />
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="列表页CSS选择器" name="first">
                <el-form ref="form1" :model="formData" label-width="160px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="条目区域块">
                                <el-input v-model="formData.listBodyCss" placeholder="div"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="条目">
                                <el-input v-model="formData.listItemCss" placeholder="ul.list li"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="条目链接">
                                <el-input v-model="formData.listLinkCss" placeholder="a"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="条目发布时间">
                                <el-input v-model="formData.listPublishTimeCss" placeholder="span"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="翻页下一页">
                                <el-input v-model="formData.listNextPageCss" placeholder="li.nextpage a"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="延迟时间">
                                <el-input v-model="formData.listDelayTime" placeholder="500"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="space" />
            </el-tab-pane>

            <el-tab-pane label="详情页CSS选择器" name="content">
                <el-form ref="form2" :model="formData" label-width="160px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="详情页标题">
                                <el-input v-model="formData.titleCss" placeholder="ul.list li"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="详情页发布时间">
                                <el-input v-model="formData.publishTimeCss" placeholder="a"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="详情页发布单位">
                                <el-input v-model="formData.publishUnitCss" placeholder="span"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="详情页正文">
                                <el-input v-model="formData.contentCss" placeholder="li.nextpage a"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="详情页附件">
                                <el-input v-model="formData.attachCss" placeholder="span"></el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="延迟时间">
                                <el-input v-model="formData.detailDelayTime" placeholder="500"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>

                <div class="space" />
            </el-tab-pane>
            <el-tab-pane label="列表页JS代码" name="list_item_js">
                <template #label><span class="custom-tabs-label">
                        <el-icon>
                            <ElementPlus />
                        </el-icon>
                        <span>列表页JS代码</span>
                    </span>
                </template>
                <el-divider>手写列表页提取JS代码 <el-button type="primary"
                        @click='editorHandle.ImportListCode'>导入样例</el-button></el-divider>
                <el-row>
                    <el-input v-model="formData.listJs" class="codeEditor" :rows="6" type="textarea"
                        placeholder="Please input" />
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="列表页翻页JS代码" name="list_trunpage_js">

                <template #label><span class="custom-tabs-label">
                        <el-icon>
                            <ElementPlus />
                        </el-icon>
                        <span>列表页翻页JS代码</span>
                    </span>
                </template>
                <el-divider>手写列表页翻页JS代码 <el-button type="primary"
                        @click='editorHandle.ImportListTrunPageCode'>导入样例</el-button></el-divider>
                <el-row>
                    <el-input v-model="formData.listTrunPageJs" class="codeEditor" :rows="6" type="textarea"
                        placeholder="Please input" />
                </el-row>
            </el-tab-pane>

            <el-tab-pane label="详情页JS代码" name="content_js">

                <template #label><span class="custom-tabs-label">
                        <el-icon>
                            <ElementPlus />
                        </el-icon>
                        <span>详情页JS代码</span>
                    </span>
                </template>
                <el-divider>手写附件下载/上传JS代码 <el-button type="primary"
                        @click='editorHandle.ImportContentCode'>导入样例</el-button></el-divider>
                <el-row><el-input v-model="formData.contentJs" class="codeEditor" :rows="6" type="textarea"
                        placeholder="Please input" />
                </el-row>
            </el-tab-pane>
            <div class="space" />
        </el-tabs>
        <div slot="footer" class="dialog-footer" style="text-align:right">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSave">保 存</el-button>
        </div>
    </el-dialog>
</template>
<script setup>
import { ref, defineEmits } from 'vue';
import { TemplateJsCode } from './jscodetpl.js'
const emit = defineEmits(['custom-event']);
//表单数据
const formData = ref({
    site: '',
    channel: '',
    href: '',
    code: '',
    modifyuser: '',
});

const activeName = ref("first")
const dialogVisible = ref(false)

//编辑器事件管理
const editorHandle = {
    ImportListCode: () => {
        formData.value.listJs = TemplateJsCode.ListJsCode
    },
    ImportContentCode: () => {
        formData.value.contentJs = TemplateJsCode.ContentJsCode
    },
    ImportAttachCode: () => {
        formData.value.attachJs = TemplateJsCode.AttachJsCode
    },
    ImportListTrunPageCode:()=>{
        formData.value.listTrunPageJs=TemplateJsCode.ListTurnPageJsCode
    }
}

const handleSave = () => {
    dialogVisible.value = false;
    emit("custom-event", { ...formData.value })
    formData.value = {}
}


//这里是重点: 向外部组建暴露可供调用的方法
defineExpose({
    dialogVisible,
    formData,
    emit
})
</script>
<style scoped>
.codeEditor {
    width: 100%;
    font-size: 12pt;
    font-weight: bold;
    line-height: 1.5em;
    padding: 10px;
}
.edit-tag-list {
    flex-wrap: wrap;
}
.edit-tag {
    margin-bottom: 4px;
}
</style>