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

frontend/src/components/spider/EditSpider.vue

@@ -57,27 +57,27 @@
         
         <el-tabs v-model="activeName" class="demo-tabs">
             <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 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"></el-input>
+                                <el-input v-model="row.actionJs" :autosize="{ minRows: 1, maxRows: 3 }" type="textarea" placeholder="Please input"></el-input>
                             </el-form-item>
                         </el-col>
-                        <el-col :span="8">
+                        <el-col :span="9">
                             <el-form-item label="检查">
-                                <el-input v-model="row.checkJs"></el-input>
+                                <el-input v-model="row.checkJs" :autosize="{ minRows: 1, maxRows: 3 }" type="textarea" placeholder="Please input"></el-input>
                             </el-form-item>
                         </el-col>
-                        <el-col :span="5">
+                        <el-col :span="3">
                             <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 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)" v-if="tabData.initList.length > 1"></el-button>
                             </el-button-group>
                         </el-col>
                     </el-row>
@@ -439,12 +439,15 @@ const editorHandle = {
 const createInitListRow = (action, check, sleep) => {
     tabData.initList.push(new InitListItem(action, check, sleep))
 }
-createInitListRow()
+
 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 = []
+        createInitListRow()
     }
     // 保存一份原始数据
     originData = JSON.parse(JSON.stringify(row))
@@ -618,8 +621,13 @@ watchEffect(() => {
     }
 })
 
-const addInitItem = () => {
-    tabData.initList.push(new InitListItem())
+const addInitItem = (index) => {
+    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)
@@ -682,6 +690,7 @@ defineExpose({
 }
 .mark-buttons {
     margin: 0 10px;
+    padding: 4px;
 }
 .form-item-sub-line {
     line-height: 24px;