feat: 编辑弹窗新增列表页初始化

frontend/src/components/spider/EditSpider.vue

@@ -56,7 +56,35 @@
         </el-form>
         
         <el-tabs v-model="activeName" class="demo-tabs">
-            <el-tab-pane label="列表页CSS选择器" name="first">
+            <el-tab-pane label="列表页初始化" name="init">
+                <el-form ref="formInit" label-width="100px">
+                    <el-row v-for="row in tabData.initList" :key="row.id">
+                        <el-col :span="8">
+                            <el-form-item label="动作" required>
+                                <el-input v-model="row.actionJs"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item label="检查">
+                                <el-input v-model="row.checkJs"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="5">
+                            <el-form-item label="超时" required>
+                                <el-input v-model.trim="row.sleepTime"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="3">
+                            <el-button-group class="mark-buttons">
+                                <el-button type="primary" :icon="CirclePlusFilled" @click="addInitItem" v-if="tabData.initList.length < tabData.initLengthMax"></el-button>
+                                <el-button type="primary" :icon="RemoveFilled" @click="removeInitItem(row)" v-if="tabData.initList.length > 1"></el-button>
+                            </el-button-group>
+                        </el-col>
+                    </el-row>
+                </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">
@@ -202,13 +230,17 @@
     </el-dialog>
 </template>
 <script setup>
-import { ref, defineEmits, computed, watchEffect } from 'vue';
+import { ref, reactive, defineEmits, computed, watchEffect } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { TemplateJsCode } from './jscodetpl.js'
 import { Link } from '@element-plus/icons-vue'
 import { useStore } from 'vuex'
 import { USER_ROLE_ADMIN, USER_ROLE_DEVELOPER, USER_ROLE_REVIEWER } from '../../data/user'
+import { getRandomString } from '../../utils'
 import { ServerActionCurrentOpenTab } from "../../../wailsjs/go/main/App"
+import { RemoveFilled, CirclePlusFilled } from '@element-plus/icons-vue'
+
+
 const emit = defineEmits(['custom-event', 'data-tag', 'form-change']);
 let originData = {}
 
@@ -220,6 +252,30 @@ const defaultFormValue = {
     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不能为空
+    }
+}
+
+const tabData = reactive({
+    initLengthMax: 5,
+    initList: [
+        // {
+        //     actionJs: '', //动作JS
+        //     checkJs: '', //检查JS
+        //     sleepTime: 500, //等待时长
+        // },
+    ]
+})
+tabData.initList.push(new InitListItem())
+
 //表单数据
 const formData = ref({
     site: '',
@@ -290,7 +346,7 @@ const cssInputBg = {
   attachCss: { color: "#fff1e5", label: "文章附件", formLabel: '详情页附件CSS' },
 }
 
-const activeName = ref("first")
+const activeName = ref("init")
 const dialogVisible = ref(false)
 
 // 用户身份标识
@@ -384,6 +440,7 @@ const editorHandle = {
 const setPageData = (row) => {
     if (!row) return
     formData.value = row
+    tabData.initList = row.initList || []
     // 保存一份原始数据
     originData = JSON.parse(JSON.stringify(row))
 }
@@ -417,8 +474,19 @@ const refreshPageData = (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 || '',
@@ -442,6 +510,8 @@ const getPageData = () => {
       // js_content
       contentJs: formDataValue.contentJs || '',
 
+      initList,
+
       maxPages: Number(formDataValue.maxPages || defaultFormValue.maxPages)
     }
 
@@ -453,7 +523,7 @@ const getPageData = () => {
 
 const emitSaveEvent = () => {
     const payload = getPageData()
-    emit("custom-event", payload)
+    // emit("custom-event", payload)
     // formData.value = {}
 }
 const handleSave = () => {
@@ -465,6 +535,19 @@ const handleSave = () => {
         })
     }
 
+    // 列表页初始化校验
+    const initList = tabData.initList
+    // 是否有为空的actionJs和sleepTime
+    const findEmpty = initList.find(e => !e.actionJs || !e.sleepTime)
+    if (findEmpty) {
+        return ElMessage({
+            message: '列表页初始化校验表单中，动作和超时不能为空',
+            type: 'error',
+            duration: 3000,
+        })
+    }
+
+
     // 如果有js，则需要二次确认
     if (formData.value.contentJs || formData.value.listJs) {
         ElMessageBox.confirm('是否保存列表页JS代码或详情页JS代码？', '提示',
@@ -530,6 +613,16 @@ watchEffect(() => {
     }
 })
 
+const addInitItem = () => {
+    tabData.initList.push(new InitListItem())
+}
+const removeInitItem = (row) => {
+    const index = tabData.initList.findIndex(i => i.id === row.id)
+    if (index >= 0) {
+        tabData.initList.splice(index, 1)
+    }
+}
+
 //这里是重点: 向外部组建暴露可供调用的方法
 defineExpose({
     dialogVisible,

frontend/src/utils/index.js

@@ -0,0 +1 @@
+export * from './str'

frontend/src/utils/str.js

@@ -0,0 +1,21 @@
+
+// 获取随机字符串
+// 不传参数则获取长度不固定的字符串
+export function getRandomString(len) {
+  let randomString = ''
+  if (len) {
+    /** 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1 **/
+    const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
+    const maxPos = $chars.length
+    for (let i = 0; i < len; i++) {
+      randomString += $chars.charAt(Math.floor(Math.random() * maxPos))
+    }
+  } else {
+    // Math.random()  生成随机数字, eg: 0.123456
+    // .toString(36)  转化成36进制 : "0.4fzyo82mvyr"
+    // .substring(2)  去掉前面两位 : "yo82mvyr"
+    // .slice(-8)  截取最后八位 : "yo82mvyr"
+    randomString = Math.random().toString(36).substring(2)
+  }
+  return randomString
+}