feat: 初始化列表爬虫代码编辑新增弹窗

frontend/src/components/spider/CodeEditor.vue

@@ -0,0 +1,54 @@
+<template>
+    <el-dialog title="编辑代码" :model-value="props.show" @update:model-value="updateModelValue" :close-on-click-modal="false" width="70%">
+        <div class="textarea-container">
+            <el-input v-model="dialogInfo.text" class="textarea" :rows="13" type="textarea" placeholder="Please input"></el-input>
+        </div>
+        <div slot="footer" class="dialog-footer" style="text-align:right">
+            <el-button @click="handleSave(false)">取 消</el-button>
+            <el-button type="primary" @click="handleSave(false)">保 存</el-button>
+        </div>
+    </el-dialog>
+</template>
+<script setup>
+import { reactive } from 'vue';
+
+const emit = defineEmits(['update:show', 'save'])
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const dialogInfo = reactive({
+    key: '',
+    text: '',
+})
+
+const setPageData = ({ text, key }) => {
+    dialogInfo.text = text
+    dialogInfo.key = key
+}
+const handleSave = (f) => {
+    emit('update:show', f)
+    emit('save', {
+        text: dialogInfo.text,
+        key: dialogInfo.key,
+    })
+}
+const updateModelValue = (e) => {
+    emit('update:show', e)
+}
+
+defineExpose({
+    setPageData
+})
+</script>
+
+<style lang="scss" scoped>
+.textarea-container {
+    .textarea {
+        height: 300px;
+    }
+}
+</style>

frontend/src/components/spider/EditSpider.vue

@@ -60,13 +60,13 @@
                 <el-form ref="formInit" label-width="60px">
                     <el-row v-for="(row, index) in tabData.initList" :key="row.id" class="form-init-row">
                         <el-col :span="9">
-                            <el-form-item label="动作" required>
-                                <el-input v-model="row.actionJs" :autosize="{ minRows: 1, maxRows: 3 }" type="textarea" placeholder="Please input"></el-input>
+                            <el-form-item label="动作" required class="pointer-input">
+                                <el-input v-model="row.actionJs" readonly placeholder="click to input" @click="showEditActionCodeDialog(row, 'actionJs')"></el-input>
                             </el-form-item>
                         </el-col>
                         <el-col :span="9">
-                            <el-form-item label="检查">
-                                <el-input v-model="row.checkJs" :autosize="{ minRows: 1, maxRows: 3 }" type="textarea" placeholder="Please input"></el-input>
+                            <el-form-item label="检查" class="pointer-input">
+                                <el-input v-model="row.checkJs" readonly placeholder="click to input" @click="showEditActionCodeDialog(row, 'checkJs')"></el-input>
                             </el-form-item>
                         </el-col>
                         <el-col :span="3">
@@ -227,6 +227,7 @@
             <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>
@@ -239,7 +240,10 @@ import { USER_ROLE_ADMIN, USER_ROLE_DEVELOPER, USER_ROLE_REVIEWER } from '../../
 import { getRandomString } from '../../utils'
 import { ServerActionCurrentOpenTab } from "../../../wailsjs/go/main/App"
 import { RemoveFilled, CirclePlusFilled } from '@element-plus/icons-vue'
+import CodeEditor from './CodeEditor.vue';
 
+const codeEditor =ref(null)
+const codeEditorShow = ref(false)
 
 const emit = defineEmits(['custom-event', 'data-tag', 'form-change']);
 let originData = {}
@@ -578,6 +582,19 @@ const handleDataTag = () => {
     emit('data-tag', originData)
 }
 
+let currentCodeEditingRow = {}
+const showEditActionCodeDialog = (row, key) => {
+    codeEditorShow.value = true
+    currentCodeEditingRow = row
+    const text = row[key]
+    codeEditor.value.setPageData({ text, key })
+}
+
+const onCodeEditorSave = ({ text, key }) => {
+    console.log(text, key, currentCodeEditingRow)
+    currentCodeEditingRow[key] = text
+}
+
 // 根据编辑弹窗的内容，获取cssMark
 const getMarkWithEditDialogInfo = info => {
     const { value, _originData } = info
@@ -699,4 +716,15 @@ defineExpose({
 .rollback-reason-container {
     color: var(--el-color-danger);
 }
+
+.demo-tabs {
+    .pointer-input {
+        ::v-deep {
+            .el-input__wrapper,
+            .el-input__inner {
+                cursor: pointer;
+            }
+        }
+    }
+}
 </style>