|
|
@@ -1,237 +1,239 @@
|
|
|
<!-- 新增爬虫 -->
|
|
|
<template>
|
|
|
- <el-dialog :title="dialogTitle" v-model="dialogVisible" :close-on-click-modal="false" width="80%">
|
|
|
- <template #header="{ titleId, titleClass }">
|
|
|
- <div class="edit-css-header">
|
|
|
- <div class="header-left">
|
|
|
- <span :id="titleId" :class="titleClass">{{ dialogTitle }}</span>
|
|
|
- </div>
|
|
|
- <div class="mark-container">
|
|
|
- <el-button-group class="mark-buttons">
|
|
|
- <el-button type="primary" :icon="Link" @click="handleDataTag">标注</el-button>
|
|
|
- </el-button-group>
|
|
|
- <!-- <div class="rollback-reason-container" v-if="formData.reason">
|
|
|
- <span class="rollback-reason-label">打回原因：</span>
|
|
|
- <span class="rollback-reason-value">{{ formData.reason }}</span>
|
|
|
- </div> -->
|
|
|
- <el-tag type="danger" v-if="formData.reason">打回原因：{{ formData.reason }} </el-tag>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <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>
|
|
|
+ <el-dialog :title="dialogTitle" v-model="dialogVisible" :close-on-click-modal="false" width="80%">
|
|
|
+ <template #header="{ titleId, titleClass }">
|
|
|
+ <div class="edit-css-header">
|
|
|
+ <div class="header-left">
|
|
|
+ <span :id="titleId" :class="titleClass">{{ dialogTitle }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="mark-container">
|
|
|
+ <el-button-group class="mark-buttons">
|
|
|
+ <el-button type="primary" :icon="Link" @click="handleDataTag">标注</el-button>
|
|
|
+ </el-button-group>
|
|
|
+ <!-- <div class="rollback-reason-container" v-if="formData.reason">
|
|
|
+ <span class="rollback-reason-label">打回原因：</span>
|
|
|
+ <span class="rollback-reason-value">{{ formData.reason }}</span>
|
|
|
+ </div> -->
|
|
|
+ <el-tag type="danger" v-if="formData.reason">打回原因：{{ formData.reason }} </el-tag>
|
|
|
</div>
|
|
|
- <div class="space" />
|
|
|
- <el-form ref="form0" label-width="160px">
|
|
|
- <el-row>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="列表页延迟时间(MS)">
|
|
|
- <el-input v-model="formData.listDelayTime" placeholder="500"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="列表翻页延迟时间(MS)">
|
|
|
- <el-input v-model="formData.listTurnDelayTime" placeholder="500"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="详情页延迟时间(MS)">
|
|
|
- <el-input v-model="formData.contentDelayTime" placeholder="500"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="采集最大页数">
|
|
|
- <el-input v-model="formData.maxPages" :placeholder="defaultFormValue.maxPages + ''"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <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-form ref="form0" label-width="160px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="列表页延迟时间(MS)">
|
|
|
+ <el-input v-model="formData.listDelayTime" placeholder="500"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="列表翻页延迟时间(MS)">
|
|
|
+ <el-input v-model="formData.listTurnDelayTime" placeholder="500"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="详情页延迟时间(MS)">
|
|
|
+ <el-input v-model="formData.contentDelayTime" placeholder="500"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="采集最大页数">
|
|
|
+ <el-input v-model="formData.maxPages" :placeholder="defaultFormValue.maxPages + ''"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-tabs v-model="activeName" class="demo-tabs">
|
|
|
+ <el-tab-pane label="列表页初始化JS代码" name="init">
|
|
|
+ <el-form ref="formInit" label-width="66px" class="form-init">
|
|
|
+ <div v-for="(row, index) in tabData.initList" :key="row.id" class="form-init-row">
|
|
|
+ <div class="form-init-row-js">
|
|
|
+ <el-form-item label="动作JS" required class="pointer-input">
|
|
|
+ <el-input v-model="row.actionJs" readonly placeholder="click to input" @click="showEditActionCodeDialog(row, 'actionJs')"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="form-init-row-js">
|
|
|
+ <el-form-item label="检查JS" class="pointer-input">
|
|
|
+ <el-input v-model="row.checkJs" readonly placeholder="click to input" @click="showEditActionCodeDialog(row, 'checkJs')"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="form-init-row-ms">
|
|
|
+ <el-form-item label="延迟(MS)" required label-width="90px">
|
|
|
+ <el-input v-model.trim="row.sleepTime"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="form-init-row-actions">
|
|
|
+ <el-button-group class="mark-buttons">
|
|
|
+ <el-button type="success" size="small" :icon="CirclePlusFilled" @click="addInitItem(index)" v-if="tabData.initList.length < tabData.initLengthMax"></el-button>
|
|
|
+ <el-button type="danger" size="small" :icon="RemoveFilled" @click="removeInitItem(row)"></el-button>
|
|
|
+ </el-button-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="no-init-list-container" v-if="tabData.initList.length === 0">
|
|
|
+ <el-button type="success" :icon="CirclePlusFilled" @click="addInitItem(index)"></el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ <el-tab-pane label="列表页CSS选择器" name="list_css_selector">
|
|
|
+ <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>
|
|
|
+ <div class="form-item-sub-line">{{ fastKeyDownMap.listBodyCss }}</div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="条目">
|
|
|
+ <el-input v-model="formData.listItemCss" placeholder="ul.list li" :style="{ background: cssInputBg.listItemCss.color }"></el-input>
|
|
|
+ <div class="form-item-sub-line">{{ fastKeyDownMap.listItemCss }}</div>
|
|
|
+ </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" :style="{ background: cssInputBg.listLinkCss.color }"></el-input>
|
|
|
+ <div class="form-item-sub-line">{{ fastKeyDownMap.listLinkCss }}</div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="条目发布时间">
|
|
|
+ <el-input v-model="formData.listPublishTimeCss" placeholder="span" :style="{ background: cssInputBg.listPublishTimeCss.color }"></el-input>
|
|
|
+ <div class="form-item-sub-line">{{ fastKeyDownMap.listPublishTimeCss }}</div>
|
|
|
+ </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" :style="{ background: cssInputBg.listNextPageCss.color }"></el-input>
|
|
|
+ <div class="form-item-sub-line">{{ fastKeyDownMap.listNextPageCss }}</div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </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" :style="{ background: cssInputBg.titleCss.color }"></el-input>
|
|
|
+ <div class="form-item-sub-line">{{ fastKeyDownMap.titleCss }}</div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="详情页发布时间">
|
|
|
+ <el-input v-model="formData.publishTimeCss" placeholder="a" :style="{ background: cssInputBg.publishTimeCss.color }"></el-input>
|
|
|
+ <div class="form-item-sub-line">{{ fastKeyDownMap.publishTimeCss }}</div>
|
|
|
+ </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" :style="{ background: cssInputBg.publishUnitCss.color }"></el-input>
|
|
|
+ <div class="form-item-sub-line">{{ fastKeyDownMap.publishUnitCss }}</div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="详情页正文">
|
|
|
+ <el-input v-model="formData.contentCss" placeholder="li.nextpage a" :style="{ background: cssInputBg.contentCss.color }"></el-input>
|
|
|
+ <div class="form-item-sub-line">{{ fastKeyDownMap.contentCss }}</div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="详情页附件">
|
|
|
+ <el-input v-model="formData.attachCss" placeholder="span" :style="{ background: cssInputBg.attachCss.color }"></el-input>
|
|
|
+ <div class="form-item-sub-line">{{ fastKeyDownMap.attachCss }}</div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</el-form>
|
|
|
-
|
|
|
- <el-tabs v-model="activeName" class="demo-tabs">
|
|
|
- <el-tab-pane label="列表页初始化JS代码" name="init">
|
|
|
- <el-form ref="formInit" label-width="66px" class="form-init">
|
|
|
- <div v-for="(row, index) in tabData.initList" :key="row.id" class="form-init-row">
|
|
|
- <div class="form-init-row-js">
|
|
|
- <el-form-item label="动作JS" required class="pointer-input">
|
|
|
- <el-input v-model="row.actionJs" readonly placeholder="click to input" @click="showEditActionCodeDialog(row, 'actionJs')"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- <div class="form-init-row-js">
|
|
|
- <el-form-item label="检查JS" class="pointer-input">
|
|
|
- <el-input v-model="row.checkJs" readonly placeholder="click to input" @click="showEditActionCodeDialog(row, 'checkJs')"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- <div class="form-init-row-ms">
|
|
|
- <el-form-item label="延迟(MS)" required label-width="90px">
|
|
|
- <el-input v-model.trim="row.sleepTime"></el-input>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- <div class="form-init-row-actions">
|
|
|
- <el-button-group class="mark-buttons">
|
|
|
- <el-button type="success" size="small" :icon="CirclePlusFilled" @click="addInitItem(index)" v-if="tabData.initList.length < tabData.initLengthMax"></el-button>
|
|
|
- <el-button type="danger" size="small" :icon="RemoveFilled" @click="removeInitItem(row)"></el-button>
|
|
|
- </el-button-group>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="no-init-list-container" v-if="tabData.initList.length === 0">
|
|
|
- <el-button type="success" :icon="CirclePlusFilled" @click="addInitItem(index)"></el-button>
|
|
|
- </div>
|
|
|
- </el-form>
|
|
|
- </el-tab-pane>
|
|
|
-
|
|
|
- <el-tab-pane label="列表页CSS选择器" name="list_css_selector">
|
|
|
- <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>
|
|
|
- <div class="form-item-sub-line">{{ fastKeyDownMap.listBodyCss }}</div>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="条目">
|
|
|
- <el-input v-model="formData.listItemCss" placeholder="ul.list li" :style="{ background: cssInputBg.listItemCss.color }"></el-input>
|
|
|
- <div class="form-item-sub-line">{{ fastKeyDownMap.listItemCss }}</div>
|
|
|
- </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" :style="{ background: cssInputBg.listLinkCss.color }"></el-input>
|
|
|
- <div class="form-item-sub-line">{{ fastKeyDownMap.listLinkCss }}</div>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="条目发布时间">
|
|
|
- <el-input v-model="formData.listPublishTimeCss" placeholder="span" :style="{ background: cssInputBg.listPublishTimeCss.color }"></el-input>
|
|
|
- <div class="form-item-sub-line">{{ fastKeyDownMap.listPublishTimeCss }}</div>
|
|
|
- </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" :style="{ background: cssInputBg.listNextPageCss.color }"></el-input>
|
|
|
- <div class="form-item-sub-line">{{ fastKeyDownMap.listNextPageCss }}</div>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- </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" :style="{ background: cssInputBg.titleCss.color }"></el-input>
|
|
|
- <div class="form-item-sub-line">{{ fastKeyDownMap.titleCss }}</div>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="详情页发布时间">
|
|
|
- <el-input v-model="formData.publishTimeCss" placeholder="a" :style="{ background: cssInputBg.publishTimeCss.color }"></el-input>
|
|
|
- <div class="form-item-sub-line">{{ fastKeyDownMap.publishTimeCss }}</div>
|
|
|
- </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" :style="{ background: cssInputBg.publishUnitCss.color }"></el-input>
|
|
|
- <div class="form-item-sub-line">{{ fastKeyDownMap.publishUnitCss }}</div>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="详情页正文">
|
|
|
- <el-input v-model="formData.contentCss" placeholder="li.nextpage a" :style="{ background: cssInputBg.contentCss.color }"></el-input>
|
|
|
- <div class="form-item-sub-line">{{ fastKeyDownMap.contentCss }}</div>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="详情页附件">
|
|
|
- <el-input v-model="formData.attachCss" placeholder="span" :style="{ background: cssInputBg.attachCss.color }"></el-input>
|
|
|
- <div class="form-item-sub-line">{{ fastKeyDownMap.attachCss }}</div>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="列表页JS代码" name="list_item_js">
|
|
|
- <template #label><span class="custom-tabs-label">
|
|
|
+ </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-button type="primary" @click='editorHandle.createImportListCode'>生成JS代码</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">
|
|
|
+ </template>
|
|
|
+ <el-divider>
|
|
|
+ 手写列表页提取JS代码
|
|
|
+ <!-- <el-button type="primary" @click='editorHandle.ImportListCode'>导入模板</el-button> -->
|
|
|
+ <el-button type="primary" @click='editorHandle.createImportListCode'>生成JS代码</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-button type="primary" @click='editorHandle.createImportListTrunPageCode'>生成JS代码</el-button>
|
|
|
- </el-divider>
|
|
|
- <el-row>
|
|
|
- <el-input v-model="formData.listTurnPageJs" 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">
|
|
|
+ </template>
|
|
|
+ <el-divider>
|
|
|
+ 手写列表页翻页JS代码
|
|
|
+ <!-- <el-button type="primary" @click='editorHandle.ImportListTrunPageCode'>导入模板</el-button> -->
|
|
|
+ <el-button type="primary" @click='editorHandle.createImportListTrunPageCode(0)'>生成JS代码</el-button>
|
|
|
+ <el-button type="primary" @click='editorHandle.createImportListTrunPageCode(2)'>生成JS代码2</el-button>
|
|
|
+
|
|
|
+ </el-divider>
|
|
|
+ <el-row>
|
|
|
+ <el-input v-model="formData.listTurnPageJs" 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-button type="primary" @click='editorHandle.createImportContentCode'>生成JS代码</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>
|
|
|
- </el-tabs>
|
|
|
- <div slot="footer" class="dialog-footer" style="text-align:right">
|
|
|
- <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
- <el-button type="primary" :disabled="savaButtonDisabled" @click="handleSave">保 存</el-button>
|
|
|
- </div>
|
|
|
- <CodeEditor v-model:show="codeEditorShow" ref="codeEditor" @save="onCodeEditorSave" />
|
|
|
- </el-dialog>
|
|
|
+ </template>
|
|
|
+ <el-divider>
|
|
|
+ 手写附件下载/上传JS代码
|
|
|
+ <!-- <el-button type="primary" @click='editorHandle.ImportContentCode'>导入模板</el-button> -->
|
|
|
+ <el-button type="primary" @click='editorHandle.createImportContentCode'>生成JS代码</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>
|
|
|
+ </el-tabs>
|
|
|
+ <div slot="footer" class="dialog-footer" style="text-align:right">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" :disabled="savaButtonDisabled" @click="handleSave">保 存</el-button>
|
|
|
+ </div>
|
|
|
+ <CodeEditor v-model:show="codeEditorShow" ref="codeEditor" @save="onCodeEditorSave" />
|
|
|
+ </el-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
@@ -257,88 +259,88 @@ const dialogTitle = ref('仅编辑 CSS选择器部分')
|
|
|
const store = useStore()
|
|
|
|
|
|
const defaultFormValue = {
|
|
|
- delayTime: 500,
|
|
|
- maxPages: 2,
|
|
|
+ delayTime: 500,
|
|
|
+ maxPages: 2,
|
|
|
}
|
|
|
|
|
|
// 定义tabData.initList数据结构
|
|
|
class InitListItem {
|
|
|
- constructor(actionJs = '', checkJs = '', sleepTime = 500) {
|
|
|
- this.actionJs = actionJs //动作JS
|
|
|
- this.checkJs = checkJs //检查JS
|
|
|
- this.sleepTime = sleepTime //等待时长
|
|
|
- this.id = getRandomString(8)
|
|
|
- // actionJs和sleepTime不能为空
|
|
|
- }
|
|
|
+ constructor(actionJs = '', checkJs = '', sleepTime = 500) {
|
|
|
+ this.actionJs = actionJs //动作JS
|
|
|
+ this.checkJs = checkJs //检查JS
|
|
|
+ this.sleepTime = sleepTime //等待时长
|
|
|
+ this.id = getRandomString(8)
|
|
|
+ // actionJs和sleepTime不能为空
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const tabData = reactive({
|
|
|
- initLengthMax: 10,
|
|
|
- initList: [
|
|
|
- // {
|
|
|
- // actionJs: '', //动作JS
|
|
|
- // checkJs: '', //检查JS
|
|
|
- // sleepTime: 500, //等待时长
|
|
|
- // },
|
|
|
- ]
|
|
|
+ initLengthMax: 10,
|
|
|
+ initList: [
|
|
|
+ // {
|
|
|
+ // actionJs: '', //动作JS
|
|
|
+ // checkJs: '', //检查JS
|
|
|
+ // sleepTime: 500, //等待时长
|
|
|
+ // },
|
|
|
+ ]
|
|
|
})
|
|
|
|
|
|
//表单数据
|
|
|
const formData = ref({
|
|
|
- site: '',
|
|
|
- channel: '',
|
|
|
- href: '',
|
|
|
- code: '',
|
|
|
- modifyuser: '',
|
|
|
-
|
|
|
- // 审核不通过原因
|
|
|
- reason: '',
|
|
|
- // 爬虫状态
|
|
|
- state: 0,
|
|
|
-
|
|
|
- // list-css-tab
|
|
|
- listBodyCss: '',
|
|
|
- listItemCss: '',
|
|
|
- listLinkCss: '',
|
|
|
- listPublishTimeCss: '',
|
|
|
- listNextPageCss: '',
|
|
|
- listDelayTime: '',
|
|
|
-
|
|
|
- // content-css-tab
|
|
|
- titleCss: '',
|
|
|
- publishTimeCss: '',
|
|
|
- publishUnitCss: '',
|
|
|
- contentCss: '',
|
|
|
- attachCss: '',
|
|
|
- contentDelayTime: '',
|
|
|
-
|
|
|
- // list-js-tab
|
|
|
- listJs: '',
|
|
|
-
|
|
|
- // list-pageination-tab
|
|
|
- listTurnPageJs: '',
|
|
|
- listTurnDelayTime: '',
|
|
|
-
|
|
|
- // detail-js-tab
|
|
|
- contentJs: '',
|
|
|
-
|
|
|
- maxPages: '',
|
|
|
+ site: '',
|
|
|
+ channel: '',
|
|
|
+ href: '',
|
|
|
+ code: '',
|
|
|
+ modifyuser: '',
|
|
|
+
|
|
|
+ // 审核不通过原因
|
|
|
+ reason: '',
|
|
|
+ // 爬虫状态
|
|
|
+ state: 0,
|
|
|
+
|
|
|
+ // list-css-tab
|
|
|
+ listBodyCss: '',
|
|
|
+ listItemCss: '',
|
|
|
+ listLinkCss: '',
|
|
|
+ listPublishTimeCss: '',
|
|
|
+ listNextPageCss: '',
|
|
|
+ listDelayTime: '',
|
|
|
+
|
|
|
+ // content-css-tab
|
|
|
+ titleCss: '',
|
|
|
+ publishTimeCss: '',
|
|
|
+ publishUnitCss: '',
|
|
|
+ contentCss: '',
|
|
|
+ attachCss: '',
|
|
|
+ contentDelayTime: '',
|
|
|
+
|
|
|
+ // list-js-tab
|
|
|
+ listJs: '',
|
|
|
+
|
|
|
+ // list-pageination-tab
|
|
|
+ listTurnPageJs: '',
|
|
|
+ listTurnDelayTime: '',
|
|
|
+
|
|
|
+ // detail-js-tab
|
|
|
+ contentJs: '',
|
|
|
+
|
|
|
+ maxPages: '',
|
|
|
});
|
|
|
|
|
|
// 快捷键map
|
|
|
const fastKeyDownMap = {
|
|
|
- // list
|
|
|
- listBodyCss: 'ctrl+2',
|
|
|
- listItemCss: 'ctrl+3',
|
|
|
- listLinkCss: 'ctrl+4',
|
|
|
- listPublishTimeCss: 'ctrl+5',
|
|
|
- listNextPageCss: 'ctrl+6',
|
|
|
- // content
|
|
|
- titleCss: 'ctrl+alt+3',
|
|
|
- publishTimeCss: 'ctrl+alt+4',
|
|
|
- publishUnitCss: 'ctrl+alt+5',
|
|
|
- contentCss: 'ctrl+alt+6',
|
|
|
- attachCss: 'ctrl+alt+7',
|
|
|
+ // list
|
|
|
+ listBodyCss: 'ctrl+2',
|
|
|
+ listItemCss: 'ctrl+3',
|
|
|
+ listLinkCss: 'ctrl+4',
|
|
|
+ listPublishTimeCss: 'ctrl+5',
|
|
|
+ listNextPageCss: 'ctrl+6',
|
|
|
+ // content
|
|
|
+ titleCss: 'ctrl+alt+3',
|
|
|
+ publishTimeCss: 'ctrl+alt+4',
|
|
|
+ publishUnitCss: 'ctrl+alt+5',
|
|
|
+ contentCss: 'ctrl+alt+6',
|
|
|
+ attachCss: 'ctrl+alt+7',
|
|
|
}
|
|
|
// 背景色map
|
|
|
const cssInputBg = {
|
|
|
@@ -367,399 +369,404 @@ const savaButtonDisabled = computed(() => !canSubmit.value)
|
|
|
|
|
|
//编辑器事件管理
|
|
|
const editorHandle = {
|
|
|
- ImportListCode: () => {
|
|
|
- formData.value.listJs = TemplateJsCode.ListJsCode
|
|
|
- },
|
|
|
- ImportContentCode: () => {
|
|
|
- formData.value.contentJs = TemplateJsCode.ContentJsCode
|
|
|
- },
|
|
|
- ImportAttachCode: () => {
|
|
|
- formData.value.attachJs = TemplateJsCode.AttachJsCode
|
|
|
- },
|
|
|
- ImportListTrunPageCode:()=>{
|
|
|
- formData.value.listTurnPageJs=TemplateJsCode.ListTurnPageJsCode
|
|
|
- },
|
|
|
- createImportListCode() {
|
|
|
- // 数据替换
|
|
|
- const originString = TemplateJsCode.ListJsCode
|
|
|
- let replaceString = originString
|
|
|
- if (formData.value.listItemCss) {
|
|
|
- replaceString = replaceString.replaceAll('{{.ListItemCss}}', formData.value.listItemCss)
|
|
|
- } else {
|
|
|
- replaceString = replaceString.replaceAll('{{.ListItemCss}}', cssInputBg.listItemCss.formLabel)
|
|
|
- }
|
|
|
- if (formData.value.listLinkCss) {
|
|
|
- replaceString = replaceString.replaceAll('{{.ListLinkCss}}', formData.value.listLinkCss)
|
|
|
- } else {
|
|
|
- replaceString = replaceString.replaceAll('{{.ListLinkCss}}', cssInputBg.listLinkCss.formLabel)
|
|
|
- }
|
|
|
- if (formData.value.listPublishTimeCss) {
|
|
|
- replaceString = replaceString.replaceAll('{{.ListPubtimeCss}}', formData.value.listPublishTimeCss)
|
|
|
- } else {
|
|
|
- replaceString = replaceString.replaceAll('{{.ListPubtimeCss}}', cssInputBg.listPublishTimeCss.formLabel)
|
|
|
- }
|
|
|
- formData.value.listJs = replaceString
|
|
|
- return replaceString
|
|
|
- },
|
|
|
- createImportContentCode() {
|
|
|
- const originString = TemplateJsCode.ContentJsCode
|
|
|
- let replaceString = originString
|
|
|
- if (formData.value.titleCss) {
|
|
|
- replaceString = replaceString.replaceAll('{{.TitleCss}}', formData.value.titleCss)
|
|
|
- } else {
|
|
|
- replaceString = replaceString.replaceAll('{{.TitleCss}}', cssInputBg.titleCss.formLabel)
|
|
|
- }
|
|
|
- if (formData.value.publishUnitCss) {
|
|
|
- replaceString = replaceString.replaceAll('{{.PublishUnitCss}}', formData.value.publishUnitCss)
|
|
|
- } else {
|
|
|
- replaceString = replaceString.replaceAll('{{.PublishUnitCss}}', cssInputBg.publishUnitCss.formLabel)
|
|
|
- }
|
|
|
- if (formData.value.publishTimeCss) {
|
|
|
- replaceString = replaceString.replaceAll('{{.PublishTimeCss}}', formData.value.publishTimeCss)
|
|
|
- } else {
|
|
|
- replaceString = replaceString.replaceAll('{{.PublishTimeCss}}', cssInputBg.publishTimeCss.formLabel)
|
|
|
- }
|
|
|
- if (formData.value.contentCss) {
|
|
|
- replaceString = replaceString.replaceAll('{{.ContentCss}}', formData.value.contentCss)
|
|
|
- } else {
|
|
|
- replaceString = replaceString.replaceAll('{{.ContentCss}}', cssInputBg.contentCss.formLabel)
|
|
|
- }
|
|
|
- if (formData.value.attachCss) {
|
|
|
- replaceString = replaceString.replaceAll('{{.AttachCss}}', formData.value.attachCss)
|
|
|
- } else {
|
|
|
- replaceString = replaceString.replaceAll('{{.AttachCss}}', cssInputBg.attachCss.formLabel)
|
|
|
- }
|
|
|
- formData.value.contentJs = replaceString
|
|
|
- },
|
|
|
- createImportListTrunPageCode() {
|
|
|
- const originString = TemplateJsCode.ListTurnPageJsCode
|
|
|
- let replaceString = originString
|
|
|
- if (formData.value.listNextPageCss) {
|
|
|
- replaceString = replaceString.replaceAll('{{.ListNextPageCss}}', formData.value.listNextPageCss)
|
|
|
- } else {
|
|
|
- replaceString = replaceString.replaceAll('{{.ListNextPageCss}}', cssInputBg.listNextPageCss.formLabel)
|
|
|
- }
|
|
|
- formData.value.listTurnPageJs = replaceString
|
|
|
- return replaceString
|
|
|
+ ImportListCode: () => {
|
|
|
+ formData.value.listJs = TemplateJsCode.ListJsCode
|
|
|
+ },
|
|
|
+ ImportContentCode: () => {
|
|
|
+ formData.value.contentJs = TemplateJsCode.ContentJsCode
|
|
|
+ },
|
|
|
+ ImportAttachCode: () => {
|
|
|
+ formData.value.attachJs = TemplateJsCode.AttachJsCode
|
|
|
+ },
|
|
|
+ ImportListTrunPageCode:()=>{
|
|
|
+ formData.value.listTurnPageJs=TemplateJsCode.ListTurnPageJsCode
|
|
|
+ },
|
|
|
+ createImportListCode() {
|
|
|
+ // 数据替换
|
|
|
+ const originString = TemplateJsCode.ListJsCode
|
|
|
+ let replaceString = originString
|
|
|
+ if (formData.value.listItemCss) {
|
|
|
+ replaceString = replaceString.replaceAll('{{.ListItemCss}}', formData.value.listItemCss)
|
|
|
+ } else {
|
|
|
+ replaceString = replaceString.replaceAll('{{.ListItemCss}}', cssInputBg.listItemCss.formLabel)
|
|
|
+ }
|
|
|
+ if (formData.value.listLinkCss) {
|
|
|
+ replaceString = replaceString.replaceAll('{{.ListLinkCss}}', formData.value.listLinkCss)
|
|
|
+ } else {
|
|
|
+ replaceString = replaceString.replaceAll('{{.ListLinkCss}}', cssInputBg.listLinkCss.formLabel)
|
|
|
+ }
|
|
|
+ if (formData.value.listPublishTimeCss) {
|
|
|
+ replaceString = replaceString.replaceAll('{{.ListPubtimeCss}}', formData.value.listPublishTimeCss)
|
|
|
+ } else {
|
|
|
+ replaceString = replaceString.replaceAll('{{.ListPubtimeCss}}', cssInputBg.listPublishTimeCss.formLabel)
|
|
|
+ }
|
|
|
+ formData.value.listJs = replaceString
|
|
|
+ return replaceString
|
|
|
+ },
|
|
|
+ createImportContentCode() {
|
|
|
+ const originString = TemplateJsCode.ContentJsCode
|
|
|
+ let replaceString = originString
|
|
|
+ if (formData.value.titleCss) {
|
|
|
+ replaceString = replaceString.replaceAll('{{.TitleCss}}', formData.value.titleCss)
|
|
|
+ } else {
|
|
|
+ replaceString = replaceString.replaceAll('{{.TitleCss}}', cssInputBg.titleCss.formLabel)
|
|
|
+ }
|
|
|
+ if (formData.value.publishUnitCss) {
|
|
|
+ replaceString = replaceString.replaceAll('{{.PublishUnitCss}}', formData.value.publishUnitCss)
|
|
|
+ } else {
|
|
|
+ replaceString = replaceString.replaceAll('{{.PublishUnitCss}}', cssInputBg.publishUnitCss.formLabel)
|
|
|
+ }
|
|
|
+ if (formData.value.publishTimeCss) {
|
|
|
+ replaceString = replaceString.replaceAll('{{.PublishTimeCss}}', formData.value.publishTimeCss)
|
|
|
+ } else {
|
|
|
+ replaceString = replaceString.replaceAll('{{.PublishTimeCss}}', cssInputBg.publishTimeCss.formLabel)
|
|
|
+ }
|
|
|
+ if (formData.value.contentCss) {
|
|
|
+ replaceString = replaceString.replaceAll('{{.ContentCss}}', formData.value.contentCss)
|
|
|
+ } else {
|
|
|
+ replaceString = replaceString.replaceAll('{{.ContentCss}}', cssInputBg.contentCss.formLabel)
|
|
|
+ }
|
|
|
+ if (formData.value.attachCss) {
|
|
|
+ replaceString = replaceString.replaceAll('{{.AttachCss}}', formData.value.attachCss)
|
|
|
+ } else {
|
|
|
+ replaceString = replaceString.replaceAll('{{.AttachCss}}', cssInputBg.attachCss.formLabel)
|
|
|
}
|
|
|
+ formData.value.contentJs = replaceString
|
|
|
+ },
|
|
|
+ createImportListTrunPageCode(mode) {
|
|
|
+ const originString = mode==2?TemplateJsCode.ListTurnPageJsCode2:TemplateJsCode.ListTurnPageJsCode
|
|
|
+ let replaceString = originString
|
|
|
+ if (formData.value.listNextPageCss) {
|
|
|
+ replaceString = replaceString.replaceAll('{{.ListNextPageCss}}', formData.value.listNextPageCss)
|
|
|
+ } else {
|
|
|
+ replaceString = replaceString.replaceAll('{{.ListNextPageCss}}', cssInputBg.listNextPageCss.formLabel)
|
|
|
+ }
|
|
|
+ formData.value.listTurnPageJs = replaceString
|
|
|
+ return replaceString
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const createInitListRow = (action, check, sleep) => {
|
|
|
- tabData.initList.push(new InitListItem(action, check, sleep))
|
|
|
+ tabData.initList.push(new InitListItem(action, check, sleep))
|
|
|
}
|
|
|
|
|
|
const setPageData = (row) => {
|
|
|
- if (!row) return
|
|
|
- formData.value = row
|
|
|
- if (Array.isArray(row.initList) && row.initList.length > 0) {
|
|
|
- tabData.initList = row.initList
|
|
|
- } else {
|
|
|
- tabData.initList = []
|
|
|
- }
|
|
|
- // 保存一份原始数据
|
|
|
- originData = JSON.parse(JSON.stringify(row))
|
|
|
+ if (!row) return
|
|
|
+ row.listDelayTime = row.listDelayTime||"1000"
|
|
|
+ row.listTurnDelayTime = row.listTurnDelayTime||"1000"
|
|
|
+ row.contentDelayTime = row.contentDelayTime||"1000"
|
|
|
+ row.maxPages = row.maxPages || "2"
|
|
|
+
|
|
|
+ formData.value = row
|
|
|
+ if (Array.isArray(row.initList) && row.initList.length > 0) {
|
|
|
+ tabData.initList = row.initList
|
|
|
+ } else {
|
|
|
+ tabData.initList = []
|
|
|
+ }
|
|
|
+ // 保存一份原始数据
|
|
|
+ originData = JSON.parse(JSON.stringify(row))
|
|
|
}
|
|
|
|
|
|
const refreshPageDataFn = (key, value) => formData.value[key] = value
|
|
|
const refreshPageData = (key, value) => {
|
|
|
- if (!key) return
|
|
|
- // 判断key是否为[listItemCss,listLinkCss,listPublishTimeCss]
|
|
|
- const listItemCss = formData.value.listItemCss
|
|
|
- if (listItemCss) {
|
|
|
- // 判断[listLinkCss,listPublishTimeCss]头部是否包含listItemCss
|
|
|
- const targetKeyList = ['listLinkCss', 'listPublishTimeCss']
|
|
|
- if (targetKeyList.includes(key) && value) {
|
|
|
- if (value.startsWith(listItemCss)) {
|
|
|
- // 替换并去空
|
|
|
- let newValue = value.replace(listItemCss, '')
|
|
|
- newValue = newValue.trim()
|
|
|
- if (newValue && value !== newValue) {
|
|
|
- refreshPageDataFn(key, newValue)
|
|
|
- } else {
|
|
|
- refreshPageDataFn(key, value)
|
|
|
- }
|
|
|
- } else {
|
|
|
- refreshPageDataFn(key, value)
|
|
|
- }
|
|
|
+ if (!key) return
|
|
|
+ // 判断key是否为[listItemCss,listLinkCss,listPublishTimeCss]
|
|
|
+ const listItemCss = formData.value.listItemCss
|
|
|
+ if (listItemCss) {
|
|
|
+ // 判断[listLinkCss,listPublishTimeCss]头部是否包含listItemCss
|
|
|
+ const targetKeyList = ['listLinkCss', 'listPublishTimeCss']
|
|
|
+ if (targetKeyList.includes(key) && value) {
|
|
|
+ if (value.startsWith(listItemCss)) {
|
|
|
+ // 替换并去空
|
|
|
+ let newValue = value.replace(listItemCss, '')
|
|
|
+ newValue = newValue.trim()
|
|
|
+ if (newValue && value !== newValue) {
|
|
|
+ refreshPageDataFn(key, newValue)
|
|
|
} else {
|
|
|
- refreshPageDataFn(key, value)
|
|
|
+ refreshPageDataFn(key, value)
|
|
|
}
|
|
|
- } else {
|
|
|
+ } else {
|
|
|
refreshPageDataFn(key, value)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ refreshPageDataFn(key, value)
|
|
|
}
|
|
|
+ } else {
|
|
|
+ refreshPageDataFn(key, value)
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
|
|
|
const getInitListData = () => {
|
|
|
- return tabData.initList.map(item => {
|
|
|
- return {
|
|
|
- actionJs: item.actionJs,
|
|
|
- checkJs: item.checkJs,
|
|
|
- sleepTime: item.sleepTime - 0,
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
-const getPageData = () => {
|
|
|
- const formDataValue = formData.value
|
|
|
- const initList = getInitListData()
|
|
|
- const payload = {
|
|
|
- // list-css
|
|
|
- listBodyCss: formDataValue.listBodyCss || '',
|
|
|
- listItemCss: formDataValue.listItemCss || '',
|
|
|
- listLinkCss: formDataValue.listLinkCss || '',
|
|
|
- listPublishTimeCss: formDataValue.listPublishTimeCss || '',
|
|
|
- listNextPageCss: formDataValue.listNextPageCss || '',
|
|
|
- listDelayTime: Number(formData.value.listDelayTime || defaultFormValue.delayTime),
|
|
|
- // content-css
|
|
|
- titleCss: formDataValue.titleCss || '',
|
|
|
- publishTimeCss: formDataValue.publishTimeCss || '',
|
|
|
- publishUnitCss: formDataValue.publishUnitCss || '',
|
|
|
- contentCss: formDataValue.contentCss || '',
|
|
|
- attachCss: formDataValue.attachCss || '',
|
|
|
- contentDelayTime: Number(formDataValue.contentDelayTime || defaultFormValue.delayTime),
|
|
|
- // js-list
|
|
|
- listJs: formDataValue.listJs || '',
|
|
|
- // js_nextpage
|
|
|
- listTurnPageJs: formDataValue.listTurnPageJs || '',
|
|
|
- listTurnDelayTime: Number(formDataValue.listTurnDelayTime || defaultFormValue.delayTime),
|
|
|
- // js_content
|
|
|
- contentJs: formDataValue.contentJs || '',
|
|
|
-
|
|
|
- initList,
|
|
|
-
|
|
|
- maxPages: Number(formDataValue.maxPages || defaultFormValue.maxPages)
|
|
|
- }
|
|
|
-
|
|
|
+ return tabData.initList.map(item => {
|
|
|
return {
|
|
|
- _originData: originData,
|
|
|
- value: payload
|
|
|
+ actionJs: item.actionJs,
|
|
|
+ checkJs: item.checkJs,
|
|
|
+ sleepTime: item.sleepTime - 0,
|
|
|
}
|
|
|
+ })
|
|
|
+}
|
|
|
+const getPageData = () => {
|
|
|
+ const formDataValue = formData.value
|
|
|
+ const initList = getInitListData()
|
|
|
+ const payload = {
|
|
|
+ // list-css
|
|
|
+ listBodyCss: formDataValue.listBodyCss || '',
|
|
|
+ listItemCss: formDataValue.listItemCss || '',
|
|
|
+ listLinkCss: formDataValue.listLinkCss || '',
|
|
|
+ listPublishTimeCss: formDataValue.listPublishTimeCss || '',
|
|
|
+ listNextPageCss: formDataValue.listNextPageCss || '',
|
|
|
+ listDelayTime: Number(formData.value.listDelayTime || defaultFormValue.delayTime),
|
|
|
+ // content-css
|
|
|
+ titleCss: formDataValue.titleCss || '',
|
|
|
+ publishTimeCss: formDataValue.publishTimeCss || '',
|
|
|
+ publishUnitCss: formDataValue.publishUnitCss || '',
|
|
|
+ contentCss: formDataValue.contentCss || '',
|
|
|
+ attachCss: formDataValue.attachCss || '',
|
|
|
+ contentDelayTime: Number(formDataValue.contentDelayTime || defaultFormValue.delayTime),
|
|
|
+ // js-list
|
|
|
+ listJs: formDataValue.listJs || '',
|
|
|
+ // js_nextpage
|
|
|
+ listTurnPageJs: formDataValue.listTurnPageJs || '',
|
|
|
+ listTurnDelayTime: Number(formDataValue.listTurnDelayTime || defaultFormValue.delayTime),
|
|
|
+ // js_content
|
|
|
+ contentJs: formDataValue.contentJs || '',
|
|
|
+
|
|
|
+ initList,
|
|
|
+
|
|
|
+ maxPages: Number(formDataValue.maxPages || defaultFormValue.maxPages)
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ _originData: originData,
|
|
|
+ value: payload
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const emitSaveEvent = () => {
|
|
|
- const payload = getPageData()
|
|
|
- emit("custom-event", payload)
|
|
|
- // formData.value = {}
|
|
|
+ const payload = getPageData()
|
|
|
+ emit("custom-event", payload)
|
|
|
+ // formData.value = {}
|
|
|
}
|
|
|
const handleSave = () => {
|
|
|
- if (!formData.value.listBodyCss) {
|
|
|
- return ElMessage({
|
|
|
- message: '条目区域块不能为空',
|
|
|
- type: 'error',
|
|
|
- duration: 3000,
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- // 列表页初始化校验
|
|
|
- const initList = tabData.initList
|
|
|
- // 是否有为空的actionJs和sleepTime
|
|
|
- const findEmpty = initList.find(e => !e.actionJs || !e.sleepTime)
|
|
|
- if (findEmpty) {
|
|
|
- return ElMessage({
|
|
|
- message: '列表页初始化JS代码校验表单中，动作JS代码和延迟时间不能为空',
|
|
|
- type: 'error',
|
|
|
- duration: 3000,
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- // 如果有js，则需要二次确认
|
|
|
- let jswarn = "";
|
|
|
- if (formData.value.contentJs && formData.value.listJs){
|
|
|
- jswarn = "是否保存列表页JS代码和详情页JS代码？";
|
|
|
- }else if (formData.value.contentJs){
|
|
|
- jswarn = "是否保存详情页JS代码？";
|
|
|
- }else if (formData.value.listJs){
|
|
|
- jswarn = "是否保存列表页JS代码？";
|
|
|
- }
|
|
|
- if (jswarn != "") {
|
|
|
- ElMessageBox.confirm(jswarn, '提示',
|
|
|
- {
|
|
|
- customClass: 'j-confirm-message-box',
|
|
|
- type: 'warning',
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- showCancelButton: false,
|
|
|
- }
|
|
|
- ).then(() => {
|
|
|
- emitSaveEvent()
|
|
|
- })
|
|
|
- } else {
|
|
|
- emitSaveEvent()
|
|
|
- }
|
|
|
+ if (!formData.value.listBodyCss) {
|
|
|
+ return ElMessage({
|
|
|
+ message: '条目区域块不能为空',
|
|
|
+ type: 'error',
|
|
|
+ duration: 3000,
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 列表页初始化校验
|
|
|
+ const initList = tabData.initList
|
|
|
+ // 是否有为空的actionJs和sleepTime
|
|
|
+ const findEmpty = initList.find(e => !e.actionJs || !e.sleepTime)
|
|
|
+ if (findEmpty) {
|
|
|
+ return ElMessage({
|
|
|
+ message: '列表页初始化JS代码校验表单中，动作JS代码和延迟时间不能为空',
|
|
|
+ type: 'error',
|
|
|
+ duration: 3000,
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 如果有js，则需要二次确认
|
|
|
+ let jswarn = "";
|
|
|
+ if (formData.value.contentJs && formData.value.listJs){
|
|
|
+ jswarn = "是否保存列表页JS代码和详情页JS代码？";
|
|
|
+ }else if (formData.value.contentJs){
|
|
|
+ jswarn = "是否保存详情页JS代码？";
|
|
|
+ }else if (formData.value.listJs){
|
|
|
+ jswarn = "是否保存列表页JS代码？";
|
|
|
+ }
|
|
|
+ if (jswarn != "") {
|
|
|
+ ElMessageBox.confirm(jswarn, '提示',
|
|
|
+ {
|
|
|
+ customClass: 'j-confirm-message-box',
|
|
|
+ type: 'warning',
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ showCancelButton: false,
|
|
|
+ }
|
|
|
+ ).then(() => {
|
|
|
+ emitSaveEvent()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ emitSaveEvent()
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const handleDataTag = () => {
|
|
|
- emit('data-tag', originData)
|
|
|
+ emit('data-tag', originData)
|
|
|
}
|
|
|
|
|
|
let currentCodeEditingRow = {}
|
|
|
const showEditActionCodeDialog = (row, key) => {
|
|
|
- codeEditorShow.value = true
|
|
|
- currentCodeEditingRow = row
|
|
|
- const text = row[key]
|
|
|
- codeEditor.value.setPageData({ text, key })
|
|
|
+ codeEditorShow.value = true
|
|
|
+ currentCodeEditingRow = row
|
|
|
+ const text = row[key]
|
|
|
+ codeEditor.value.setPageData({ text, key })
|
|
|
}
|
|
|
|
|
|
const onCodeEditorSave = ({ text, key }) => {
|
|
|
- currentCodeEditingRow[key] = text
|
|
|
+ currentCodeEditingRow[key] = text
|
|
|
}
|
|
|
|
|
|
// 根据编辑弹窗的内容，获取cssMark
|
|
|
const getMarkWithEditDialogInfo = info => {
|
|
|
- const { value, _originData } = info
|
|
|
- const baseInfo = {
|
|
|
- code: _originData.code,
|
|
|
- site: _originData.site,
|
|
|
- channel: _originData.channel,
|
|
|
- href: _originData.href,
|
|
|
- modifyuser: _originData.modifyuser,
|
|
|
- }
|
|
|
- return {
|
|
|
- ...value,
|
|
|
- ...baseInfo,
|
|
|
- }
|
|
|
+ const { value, _originData } = info
|
|
|
+ const baseInfo = {
|
|
|
+ code: _originData.code,
|
|
|
+ site: _originData.site,
|
|
|
+ channel: _originData.channel,
|
|
|
+ href: _originData.href,
|
|
|
+ modifyuser: _originData.modifyuser,
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ ...value,
|
|
|
+ ...baseInfo,
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const onEditFormChange = (info) => {
|
|
|
- const mark = getMarkWithEditDialogInfo(info)
|
|
|
- ServerActionCurrentOpenTab(mark)
|
|
|
+ const mark = getMarkWithEditDialogInfo(info)
|
|
|
+ ServerActionCurrentOpenTab(mark)
|
|
|
}
|
|
|
|
|
|
const onCssFormChange = () => {
|
|
|
- const payload = getPageData()
|
|
|
- onEditFormChange(payload)
|
|
|
+ const payload = getPageData()
|
|
|
+ onEditFormChange(payload)
|
|
|
}
|
|
|
|
|
|
watchEffect(() => {
|
|
|
- // 监控以下变量变化，执行onCssFormChange回调
|
|
|
- formData.value.listBodyCss;
|
|
|
- formData.value.listItemCss;
|
|
|
- formData.value.listLinkCss;
|
|
|
- formData.value.listPublishTimeCss;
|
|
|
- formData.value.listNextPageCss;
|
|
|
- formData.value.titleCss;
|
|
|
- formData.value.publishTimeCss;
|
|
|
- formData.value.publishUnitCss;
|
|
|
- formData.value.contentCss;
|
|
|
- formData.value.attachCss;
|
|
|
- if (dialogVisible.value) {
|
|
|
- onCssFormChange()
|
|
|
- }
|
|
|
+ // 监控以下变量变化，执行onCssFormChange回调
|
|
|
+ formData.value.listBodyCss;
|
|
|
+ formData.value.listItemCss;
|
|
|
+ formData.value.listLinkCss;
|
|
|
+ formData.value.listPublishTimeCss;
|
|
|
+ formData.value.listNextPageCss;
|
|
|
+ formData.value.titleCss;
|
|
|
+ formData.value.publishTimeCss;
|
|
|
+ formData.value.publishUnitCss;
|
|
|
+ formData.value.contentCss;
|
|
|
+ formData.value.attachCss;
|
|
|
+ if (dialogVisible.value) {
|
|
|
+ onCssFormChange()
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
const addInitItem = (index) => {
|
|
|
- const item = new InitListItem()
|
|
|
- if (index !== undefined) {
|
|
|
- tabData.initList.splice(index + 1, 0, item)
|
|
|
- } else {
|
|
|
- tabData.initList.push(item)
|
|
|
- }
|
|
|
+ const item = new InitListItem()
|
|
|
+ if (index !== undefined) {
|
|
|
+ tabData.initList.splice(index + 1, 0, item)
|
|
|
+ } else {
|
|
|
+ tabData.initList.push(item)
|
|
|
+ }
|
|
|
}
|
|
|
const removeInitItem = (row) => {
|
|
|
- const index = tabData.initList.findIndex(i => i.id === row.id)
|
|
|
- if (index >= 0) {
|
|
|
- tabData.initList.splice(index, 1)
|
|
|
- }
|
|
|
+ const index = tabData.initList.findIndex(i => i.id === row.id)
|
|
|
+ if (index >= 0) {
|
|
|
+ tabData.initList.splice(index, 1)
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
//这里是重点: 向外部组建暴露可供调用的方法
|
|
|
defineExpose({
|
|
|
- dialogVisible,
|
|
|
- formData,
|
|
|
- setPageData,
|
|
|
- getPageData,
|
|
|
- refreshPageData,
|
|
|
- emit
|
|
|
+ dialogVisible,
|
|
|
+ formData,
|
|
|
+ setPageData,
|
|
|
+ getPageData,
|
|
|
+ refreshPageData,
|
|
|
+ emit
|
|
|
})
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
::v-deep {
|
|
|
- .el-form-item {
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
- .el-input__wrapper {
|
|
|
- background-color: transparent;
|
|
|
- }
|
|
|
-
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .el-input__wrapper {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
.header-left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
.codeEditor {
|
|
|
- width: 100%;
|
|
|
- font-size: 12pt;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 1.5em;
|
|
|
- padding: 10px;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 12pt;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 1.5em;
|
|
|
+ padding: 10px;
|
|
|
}
|
|
|
.edit-tag-list {
|
|
|
- flex-wrap: wrap;
|
|
|
+ flex-wrap: wrap;
|
|
|
}
|
|
|
.edit-tag {
|
|
|
- margin-bottom: 4px;
|
|
|
+ margin-bottom: 4px;
|
|
|
}
|
|
|
.edit-css-header {
|
|
|
- display: flex;
|
|
|
+ display: flex;
|
|
|
}
|
|
|
.mark-container {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex: 1;
|
|
|
- margin-left: 10px;
|
|
|
- :deep(.el-tag) {
|
|
|
- padding-top: 2px;
|
|
|
- padding-bottom: 2px;
|
|
|
- height: unset;
|
|
|
- min-height: 24px;
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 10px;
|
|
|
+ :deep(.el-tag) {
|
|
|
+ padding-top: 2px;
|
|
|
+ padding-bottom: 2px;
|
|
|
+ height: unset;
|
|
|
+ min-height: 24px;
|
|
|
+ }
|
|
|
}
|
|
|
.mark-buttons {
|
|
|
- margin: 0 10px;
|
|
|
- padding: 4px;
|
|
|
+ margin: 0 10px;
|
|
|
+ padding: 4px;
|
|
|
}
|
|
|
.form-item-sub-line {
|
|
|
- line-height: 24px;
|
|
|
- color: var(--el-color-primary);
|
|
|
+ line-height: 24px;
|
|
|
+ color: var(--el-color-primary);
|
|
|
}
|
|
|
.rollback-reason-container {
|
|
|
- color: var(--el-color-danger);
|
|
|
+ color: var(--el-color-danger);
|
|
|
}
|
|
|
|
|
|
.demo-tabs {
|
|
|
- .pointer-input {
|
|
|
- ::v-deep {
|
|
|
- .el-input__wrapper,
|
|
|
- .el-input__inner {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
+ .pointer-input {
|
|
|
+ ::v-deep {
|
|
|
+ .el-input__wrapper,
|
|
|
+ .el-input__inner {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.form-init {
|
|
|
- padding-bottom: 16px;
|
|
|
+ padding-bottom: 16px;
|
|
|
}
|
|
|
.form-init-row {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- ::v-deep {
|
|
|
- .el-form-item {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ ::v-deep {
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 0;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .form-init-row-js {
|
|
|
- flex: 8;
|
|
|
- }
|
|
|
- .form-init-row-ms {
|
|
|
- flex: 4;
|
|
|
- }
|
|
|
+ .form-init-row-js {
|
|
|
+ flex: 8;
|
|
|
+ }
|
|
|
+ .form-init-row-ms {
|
|
|
+ flex: 4;
|
|
|
+ }
|
|
|
|
|
|
- &:not(:last-of-type) {
|
|
|
- margin-bottom: 16px;
|
|
|
- }
|
|
|
+ &:not(:last-of-type) {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
